Question

我想知道我是否可以仅使用css更改悬停选项的背景颜色。我对浏览器兼容性并不感到烦恼。但是给我一个适用于大多数浏览器的解决方案。

Answer 1

我认为最好的解决方案首先是要知道您不必期望您的页面在所有浏览器中看起来都一样。一个好的清洁解决方案是使用每个浏览器的功能来做到这一点。例如为chrome / safari构建一个css，另一个用于IE，最后一个用于Firefox，你可以按照以下示例进行：

我认为将JAVASCRIPT用于此目的并不是最佳解决方案。

for web-kit safari / chrome

select{
      -webkit-appearance: button;
      -webkit-border-radius: 5px;
      -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
      -webkit-padding-end: 20px;
      -webkit-padding-start: 2px;
      -webkit-user-select: none;
      background-image: url(../img/forms/arrow_blue.png), 
      -webkit-linear-gradient(#E1E1E1, #FFF 30%, #FFF);
      background-position: center right;
      background-repeat: no-repeat;
      border: 1px solid #CCC;
      color: #999;
      font-size: 90%;
      font-family:Comfortaa, Arial, Helvetica, sans-serif;
      margin: 0;
      overflow: hidden;
      padding-top: 2px;
      padding-bottom: 2px;
      text-overflow: ellipsis;
      white-space: nowrap;
      height:40px; 
    }

对于firefox：

@-moz-document url-prefix() {
    select{
        border-radius: 5px;     
        background-image: url(../img/forms/arrow_blue.png), 
        background-position: center right;
        background-repeat: no-repeat;
        border: 1px solid #CCC;
        color: #999;
        font-size: 90%;
        font-family:Comfortaa, Arial, Helvetica, sans-serif;
        margin: 0;
        height:auto; 
        padding:10px;
    }
}

您可以将每个版本中的每个IE定位为示例

<!-- cause not every body is pretty -->
<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="frontend/css/ie8-and-down.css" />
<![endif]-->

select{ border:1px solid #EEE;
    width:auto !important;
    height:35px !important;
    padding:5px !important;
    margin:5px !important;
    line-height:1 !important;
}

我认为通过这种方式，您可以在所有浏览器中获得不错的下拉菜单，而只有safari / Chrome将完全按照您的喜好显示，其他的将按用户的预期运行，您不必使用javascript

Answer 2

嗯......您可以使用：hover伪类来更改select元素的背景颜色，但我刚试过：

option:hover {
   background-color: #F00;
}

没有结果。但是：

select:hover option {
   background-color: #F00;
}

当你将鼠标悬停在选择菜单上时，

会改变选项的背景颜色，但据我所知，使用选项：悬停本身不起作用

Answer 3

select标签取决于你所使用的操作系统，你不能按照你想要的方式设计它最好的解决方案是使用jquery用样式列表替换select（可用css编辑）

看看：

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Answer 4

这是你的事吗？

select:hover { background-color: red; }

Answer 5

我知道这是一个老问题，但是因为我过去曾尝试过这个问题，虽然我得出了大部分时间都不值得的结论，但我发现有时它确实影响了设计理念（我“我不是设计师，但他们对这样的细节感到非常沮丧”，我想我会分享一个我发现的资源实际上建议解决这个事实的方法很难（如果不是不可能的话）得到一个只需将css应用于标记即可获得足够的外观和感觉。希望它对某人有帮助。

The html select tag styling challenge

样式选择标记

5 个答案: