CSS与选择框-宽度和标签

我有一个选择框，我需要样式-我们目前使用一个jquery插件，用div和list替换select，我们想摆脱它

我发现一个非常接近我们想要的，但是当我尝试将它应用到我们的select时，有一些不合适的东西。我是一名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>

我有两个问题

1） 使用

label:after

属性创建的自定义箭头未正确对齐。在原始样本上，它的位置使其隐藏默认的选择框箭头。在我的屏幕上，您仍然可以看到自定义箭头下方的默认选择箭头

2） 这些选项没有继承父选择的宽度。单击它时，内容会延伸到选择框的右边缘之外。我原以为

溢出

和

文本溢出

属性可以解决这个问题，但它们没有

下面是当前代码的一个示例。有人能帮助解决这两个问题吗？如果你知道你的CSS，我相信它们很简单，但我很少有一天会和它有任何关系，我只是不知道从哪里开始寻找

更新

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

铬：

火狐：

IE9：

---

选择框很难设置样式，所以我通常做的是设置容器的样式，比如

（或者为了简单起见，甚至可以使用

），在其上使用

溢出：隐藏

，然后在其内部放置稍大的

不接触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;
}

这应该接近你想要的

---

小提琴：

在绝对

：在
之后和
：在
之前使用负片
顶部，例如：
顶部：-18px以固定定位。虽然我不知道如何更改选项的宽度，但我通常只有较短的选项。我看不到默认的选择框箭头？但到目前为止，我最可靠的方法是用
overflow:hidden
设计一个
div
，让背景匹配的选择框超过
div
的大小，这样带箭头的部分就被简单地隐藏了。默认的选择框箭头在Chrome中不可见；它在Firefox中。IE9简直太可怕了（是的，我们必须支持它。）用截图更新OP。删除
选择#地址(下拉选项{background:black；}
以避免IE上的黑色背景。@EmmyS啊耶，但这正是为什么我喜欢用
div
或其他任何带有
溢出：隐藏的
样式，并在其中放置一个更大的
，快速示例：这是我迄今为止尝试过的最可靠的解决方案。然后，您可以使
透明，并在
div
中以箭头为背景（例如）。@EmmyS或well。。这：
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;
}