纯交叉浏览器CSS选择控件样式

规则#1：切勿使用JAVASCRIPT来设置HTML元素的样式！

如果JS被禁用或阻止，CSS将崩溃并烧录。始终从纯CSS开始，然后在您喜欢的任何额外“脚本胶”上分层。记住<select>控件（如HTML中的所有表单字段）被替换为元素，这意味着设备上的浏览器和操作系统对控件的设计和布局具有一定的控制权。这就是为什么Windows、苹果和移动设备控件看起来都不同！这是有原因的。

不要用JavaScript或CSS黑客劫持控件设计，除非您觉得UI由于某种原因（如删除选择控件上的箭头）必须进行修改。下面的CSS不这样做。它接受了它可以在选择表单控件中重新设计的核心限制。我仍然会从我干净的CSS解决方案开始，然后在顶部覆盖任何自定义“黑客”。如果它们失败了，那么您的CSS将优雅地退回到一个始终适用于20多年浏览器的全局CSS设计。。。加上未来的！

下面的CSS代码跨浏览器（从1990年代到现在）工作，并将所有浏览器（过去和现在）与相同的基本CSS设计对齐。您可以根据需要自定义此代码。你可以在非常旧的浏览器中测试它，它应该给你一个与现代HTML5浏览器相匹配的外观和感觉，这应该一直是目标。

/* This CSS works in 20+ years of browsers without hacks, scripts, or tricks. */

body optgroup,
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
    margin: 0;
    padding: 0;
    font-style: inherit;
    font-weight: bold;
    cursor: pointer;
    background: #fff;
    border: none;
}

body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
    background: #f9f9ff;
}

body option,
body option:visited,
body option:hover,
body option:focus,
body option:active {
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #fff;
    border: none;
}
body option:visited,
body option:hover,
body option:focus,
body option:active {
    background: #f9f9ff;
}

body select,
body select:visited,
body select:hover,
body select:focus,
body select:active {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    padding: .17em .17em;
    margin: 0;
    text-transform: none;
    border-radius: .2em;
    border: 2px solid #bbb;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
    line-height: normal;
}

body select:visited,
body select:hover,
body select:focus,
body select:active {
    background: #f9f9ff;
    border: 2px solid #999;
}
body select:focus {
    background: #fff;
    border: 2px solid #999;
}

body select:required:visited:valid,
body select:required:valid {
    background: #fff;
    border: 2px solid #7fbe96;
}

body select:required:hover:valid {
    background: #f9f9ff;
    border: 2px solid #278b3d;
}

body select:required:focus:valid {
    background: #fff;
    border: 2px solid #278b3d;
}

body select:required:visited:invalid,
body select:required:invalid {
    background: #fff;
    border: 2px solid #ff6565;
}

body select:required:hover:invalid {
    background: #f9f9ff;
    border: 2px solid #ce2f2f;
}

body select:required:focus:invalid {
    background: #fff;
    border: 2px solid #ce2f2f;
}

body select[disabled],
body select[readonly],
body select[disabled="disabled"],
body select[readonly="readonly"],
body select[disabled]:visited,
body select[readonly]:visited,
body select[disabled="disabled"]:visited,
body select[readonly="readonly"]:visited,
body select[disabled]:hover,
body select[readonly]:hover,
body select[disabled="disabled"]:hover,
body select[readonly="readonly"]:hover,
body select[disabled]:focus,
body select[readonly]:focus,
body select[disabled="disabled"]:focus,
body select[readonly="readonly"]:focus,
body select[disabled]:active,
body select[readonly]:active,
body select[disabled="disabled"]:active,
body select[readonly="readonly"]:active {
    border: 2px solid #bbb;
    background: #f0f0f0;
    color: #999;
    cursor: default !important;
}

仅限CSS和HTML的解决方案

它似乎与Chrome、Firefox和Internet Explorer 11兼容。但请留下您对其他网络浏览器的反馈。

正如Danield的回答所建议的那样，我将我的选择包装在一个div中（甚至两个div用于x浏览器兼容性），以获得预期的行为。

看见http://jsfiddle.net/bjap2/

HTML格式：

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

注意两个div包装器。

还请注意，添加了额外的div以将箭头向下按钮放置在您喜欢的位置（绝对位置），这里我们将其放在左侧。

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}

这是一个适用于所有现代浏览器的版本。关键是使用外观：无，这将删除默认格式。由于所有的格式都不存在了，您必须重新添加箭头，以在视觉上区分选择和输入。

工作示例：https://jsfiddle.net/gs2q1c7p/

选择：不（[多个]）{-webkit外观：无；-moz外观：无；背景位置：右50%；背景重复：无重复；背景图像：url（数据：image/png；base64，iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRR vYmU6bnM6bWV0YS8IIHg6eG1wdGs9IkFkb2JlIFhNUCBDB3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbeG1wPSJodHwOi8 vbnMuYWRvYmUuY29tL3hhcC8xLjAvIB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1spnM 6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9ZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtC5paWQ6NDZFNDEWNjlGNzFEMTFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9固有C5kaWQ6NDZFND EWNkFGNzFEMTFTFMkJEQ 0VDRTM10RCMz MyMkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZ WY6ZG9jdW1lbnJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAMAzNENEOH+do8AAAAAASUVORK5CYII=）；衬垫：.5cm；右侧填充：1.5em}#我的选择{边框半径：0}<select id=“mySelect”><option>选项1</option><option>选项2</option></选择>

对您可以通过标记名来设置任何HTML元素的样式，如下所示：

select {
  font-weight: bold;
}

当然，您也可以像其他任何元素一样使用CSS类来设置其样式：

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

select元素及其下拉功能很难设置样式。

Chris Heilmann的select元素的风格属性证实了Ryan Dohery对第一个答案的评论：

“select元素是操作系统，而不是浏览器chrome。因此风格不可靠，尝试也不一定有意义无论如何"

博客文章HowtoCSS表单下拉样式没有JavaScript适合我，但在Opera中失败了：

选择{边框：0无；颜色：#FFFFFF；背景：透明；字体大小：20px；字号：粗体；填充：2px 10px；宽度：378px；*宽度：350px；*背景：#58B14C；}#主要选举{溢出：隐藏；宽度：350px；-moz边框半径：9px 9px 9px 9px；-webkit边框半径：9px 9px 9px 9px；边框半径：9px 9px 9px 9px；方框阴影：1px 1px 11px#3330033；background:url（“arrow.gif”）无重复滚动319px 5px#58B14C；}<div id=“mainselection”><选择><option>选择选项</option><option>选项1</option><option>选项2</option></选择></div>