发表新帖
发表新帖

Change Select List Option background colour on hover

前端 未结
关注
8 745
小蘑菇
小蘑菇 2020-11-22 12:21

Is it possible to change the default background color of a select list option on hover?

HTML:
提交评论
  •  加载中...
  • 天涯浪人
    2020-11-22 12:55

    this is what you need, the child combinator:

        select>option:hover
    {
        color: #1B517E;
        cursor: pointer;
    }

    Try it, works perfect.

    Here's the reference: http://www.w3schools.com/css/css_combinators.asp

    0 讨论(0)
  • 孤城傲影
    2020-11-22 12:57

    Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.

    0 讨论(0)
  • 予麋鹿
    2020-11-22 13:01

    Implementing an inset box shadow CSS works on Firefox:

    select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #000 inset;
}

    Checked option item works in Chrome:

    select:focus > option:checked { 
    background: #000 !important;
}

    There is test on https://codepen.io/egle/pen/zzOKLe

    For me this is working on Google Chrome Version 76.0.3809.100 (Official Build) (64-bit)

    Newest article I have found about this issue by Chris Coyier (Oct 28, 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/

    0 讨论(0)
  • 误落风尘
    2020-11-22 13:02

    I realise this is an older question, but I recently came across this need and came up with the following solution using jQuery and CSS:

    jQuery('select[name*="lstDestinations"] option').hover(
        function() {
            jQuery(this).addClass('highlight');
        }, function() {
            jQuery(this).removeClass('highlight');
        }
    );

    and the css:

    .highlight {
    background-color:#333;
    cursor:pointer;
}

    Perhaps this helps someone else.

    0 讨论(0)
  • 旧时难觅i
    2020-11-22 13:05

    In FF also CSS filter works fine. E.g. hue-rotate:

    option {
    filter: hue-rotate(90deg);
}

    https://jsfiddle.net/w3a740jq/4/

    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题