locked
add css to title attribute in select option dropdown RRS feed

  • 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.

    Friday, September 13, 2019 4:15 PM

All replies

  • User-2054057000 posted

    Try:

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

    Saturday, September 14, 2019 8:39 AM
  • User-2132746437 posted

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

    Saturday, September 14, 2019 2:57 PM
  • 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

    Monday, September 16, 2019 3:13 AM