2016-01-03 71 views
0

我需要改变选择选项悬停背景颜色只使用CSS。如何更改选择选项悬停背景颜色只使用CSS?

Please check the link : https://jsfiddle.net/bilashcse/k2o783rp/ 

我的代码:

HTML:

<div> 
    <select> 
    <option>Apples</option> 
    <option selected>Pineapples</option> 
    <option>Chocklate</option> 
    <option>Pancakes</option> 
    </select> 
</div> 

CSS:

select { 
    margin: 50px; 
    border: 1px solid #111; 
    background: transparent; 
    width: 150px; 
    padding: 5px 35px 5px 5px; 
    font-size: 16px; 
    border: 1px solid #ccc; 
    height: 34px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background: url(http://www.stackoverflow.com/favicon.ico) 96%/15% no-repeat #eee; 
} 
select option:hover{ 
    background:red !important; 
} 
+1

可能的重复http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover – Sumit

+0

你想让整个红色像这样?:https:// jsfiddle.net/k2o783rp/1/ –

回答

2

这是不容易改变<option>元素的样式。它们由您的操作系统呈现,而不是由任何HTMl或CSS代码呈现。

唯一的选择是在CSS中使用'box-shadow',但请记住,您必须适应每个操作系统!