仅使用 css 样式化选择下拉菜单 [重复]答案

【问题标题】：Styling select dropdown with css only [duplicate]仅使用 css 样式化选择下拉菜单 [重复]
【发布时间】：2013-08-07 13:15:38
【问题描述】：

我在网上搜索了将近两个小时，甚至没有找到一个 CSS 样式选择下拉列表的示例。最重要的是，我对 z-index 感兴趣，可以在绝对 div 块下显示选择下拉列表。唯一成立的是样式偏移、背景颜色和字体，但其他 css 属性呢？搜索 webkit shadow dom 也没有结果。这真的不可能吗？ :(

【问题讨论】：

标签： css select webkit

【解决方案1】：

这将帮助您设置选择标签的样式。 http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

【讨论】：

这是javascript方式，我只需要使用css

【解决方案2】：

使用 CSS3 设置选择框样式：

HTML：

<label>
    <select>
        <option selected> Select Box </option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>

CSS：

body, html { 
    background:#444;
    text-align:center;
    padding:50px 0;
}

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

演示：http://cssdeck.com/labs/styling-select-box-with-css3

【讨论】：

它的样式选择。我需要为它的下拉菜单设置样式。
除此示例外，您还可以为
这是一个很好的答案和一个好主意。但是，在 IE 中单击箭头不起作用。
我觉得这个方案不适应IE。

【解决方案3】：

这是代码。

body {
    margin-top:20px;
    margin-left:20px;
}
select {
    padding:9px;
    margin: 0;
    border-radius:4px;
    -webkit-box-shadow: 
        0 0px 0 #ccc,
        0 0px #fff inset;
    background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
    background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
    color:black;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none; 
    cursor:pointer;
    border: 1px solid #ccc;
}

请转至this fiddle

【讨论】：

此样式选择，但不是下拉列表。我需要完全自定义下拉 z-index 以将其置于块下
prntscr.com/3mzug6 在 Firefox 中查看时。 :(