Question

我有一个我需要设置样式的选择框 - 我们目前使用的是一个jquery插件，用div和列表替换选择，我们想要摆脱它。

我发现sample与我们想要的非常接近，但是当我尝试将它应用于我们的选择时，会有一些关闭的东西。我是一名PHP开发人员，CSS不是我的事，所以我不知道从哪里开始看这个。我花了几个小时摆弄不同的价值观，但没有成功。

这是选择框：

<label class="dropdown_arrow">
    <select id="address_dropdown">
        <option value="">Select a saved location</option>
        <option value="0">THISISAREALYLONGNICKNAME..........................: 602 BLOWING ROCK RD APT. 2 BOONE, NC 28607</option>
        <option value="1">TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810</option>
        <option value="2">MOM &amp; DAD: 9880 BLUEBONNET BLVD BATON ROUGE, LA 70810</option>
        <option value="3">414 N ORLEANS ST CHICAGO, IL 60610</option>
        <option value="4">NEW ADDRESS: 10 BARTON DR HOMEWOOD, IL 60430</option>
        <option value="5">1600 PENNSYLVANIA AVE WASHINGTON, DC 20500</option>
        <option value="6">Add a new address</option>
    </select>
</label>

这是CSS：

select#address_dropdown {
    width: 515px;
    font-family: 'Interstate',sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding:6px 10px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background: #f8f8f8;
    color:#888;
    border:1px solid #ccc;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    /* overflow-y: scroll; */
    overflow: hidden;
    text-overflow: ellipsis;
}

select#address_dropdown option {
    background: black;
    color: white;
    font-weight: normal;
    font-size: 12px;
    padding-top: 8px;
    overflow: hidden; 
    text-overflow: ellipsis;
}

/* 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.dropdown_arrow {position:relative}
label.dropdown_arrow:after {
    content:'>';
    font:18px "Consolas", monospace;
    color:red;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:15px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label.dropdown_arrow:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

我有两个问题。

1）使用label:after属性创建的自定义箭头未正确对齐。在原始样本上，它位于隐藏默认选择框箭头的位置。在我的情况下，您仍然可以在自定义箭头下方看到默认的选择箭头。

2）选项不继承父选择的宽度。单击它时，内容将超出选择框的右边缘。我原以为overflow和text-overflow属性会解决这个问题，但他们没有。

这是当前代码的fiddle。谁能帮助解决这两个问题？如果你知道你的CSS，我相信它们非常简单，但是我很少与它有任何关系，我只是不知道从哪里开始寻找。

更新

显然，被吹捧为跨浏览器的代码在FF和Chrome中看起来不同，在IE9中完全糟糕。

铬：

Chrome