带有选择框的 CSS - 宽度和标签

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 :

火狐:

IE9:

Answer 1

选择框设计起来很麻烦，所以我通常做的是设计一个容器，比如 <div> (或者为了简单起见甚至可以使用 <label>)，使用 overflow:hidden在上面放一个稍大的 <select>里面。

不修改您的 HTML 但添加不同的 CSS，例如:

label {
  display: block;
  width: 515px;
  font-family: 'Interstate',sans-serif;
  font-size: 16px;
  font-weight: bold;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  border:1px solid #ccc;
  overflow:hidden;
  background: #f8f8f8;
  position:relative;
}

select {
  border: none;
  outline-width: 0;
  width: 560px;
  background: #f8f8f8;
  color:#888;
  padding: 6px 10px;
  font-size: 16px;
  cursor:pointer;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

label:after {
  content: '>';
  font: 18px "Consolas", monospace;
  color: red;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 12px;
  top: 5px;
  z-index: 1;
  padding: 0 0 2px;
  border-bottom: 1px solid #ddd;
  position: absolute;
  pointer-events: none;
}

这应该接近您要查找的内容。

fiddle :http://jsfiddle.net/VZEv5/3/