Select Option Css

Question

I have a simple dropdown select option - example below

<select>
  <option value="volvo" title="NEED THIS BIGGER AND FORMATED" >Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

When hover over Volvo a type of ToolTip pops up - but would like it larger and appear quicker.

Is there a solution to this - maybe css.

Answer 1

I doubt this is exactly what you want, but it is a step in that direction. As @Evochrome mentioned, it's difficult to style native select elements. Styling the title attribute on top of that is even more difficult.

In order to style the select element you need to add a size attribute. This creates a potentially undesired effect of turning the select into a list instead of a dropdown. Unfortunately this is required.

From there we can style the title by creating an :after pseudo-element with the content set to the title attribute, using the option[title]:hover:after selector. This allows you some options for styling the title attribute but you're still limited.

div {
  position: relative;
}

select {
  width: 100px;
}

option[title]:hover:after {
  content: attr(title);
  position: absolute;
  display: block;
  left: 110px;
  top: 0;
  font-size: 24px;
  font-style: italic;
  border: 2px solid #000000;
}

<div>
<select size="4">
  <option value="volvo" title="NEED THIS BIGGER AND FORMATED" ><a>Volvo</a></option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>