add css to title attribute in select option dropdown

Question

User-2132746437 posted

Is there a way to add css to the title attribute in a dropdown?

<select>
   <option id='cars' title='@Model.Cars.NewCarsDescription' value=@Model.Cars.Id'>@Model.Cars.CarList</option>
</select>

I'd like to add some style to the title so it's not that dull yellow/cream color.

Answer 1

User-2054057000 posted

Try:

select:hover {
  content: attr(title);
  font-size: 35px;
}

Answer 2

User-2132746437 posted

I tried that with no luck, it's still the ugly cream color box

Answer 3

User61956409 posted

Hi csharpcoder,

It seems that you'd like to display customizable tooltip for select options, to achieve it, you can refer to the following CSS styles. And please note that the size attribute should be set.

<style>
    select {
        width:80px;
    }

    [data-title] {
        ;
    }

        [data-title]:hover::before {
            content: attr(data-title);
            ;
            bottom: -26px;
            display: inline-block;
            padding: 3px 6px;
            border-radius: 2px;
            background: #000;
            color: #fff;
            font-size: 18px;
            white-space: nowrap;
            z-index:99999;
        }

        [data-title]:hover::after {
            content: '';
            ;
            bottom: -10px;
            left: 8px;
            display: inline-block;
            color: #fff;
            border: 8px solid transparent;
            border-bottom: 8px solid #000;
        }
</style>

<select id="ddl1" size="5">
    <option value="0" data-title="Test1">Test1</option>
    <option selected="selected" data-title="Test2" value="1">Test2</option>
    <option value="2" data-title="Test3">Test3</option>
    <option value="3" data-title="Test4">Test4</option>
    <option value="4" data-title="Test5">Test5</option>
</select>

Test Result

Besides, in this SO thread, Abk shared another approach with bootstrap select, you can check it.

https://stackoverflow.com/a/46989287/6751634 

With Regards,

Fei Han