在选择框中填充

Question

我知道用css设置选择框有点痛苦，但是不使用高级技术无论如何我都可以添加一些填充来向下推文本而不用它也在右边的箭头上添加填充手边？

Answer 1

将此添加到您的CSS类。也许这有帮助吗？

-webkit-appearance:none;
-moz-appearance:none;
appearance:none;

Answer 2

由于select框在不同浏览器，特别是操作系统上的显示方式不同，因此无法保证一致性。

例如，我可以在mac上执行的最小格式化是：

select { height:40px; background:transparent; }

它看起来像这样：

Answer 3

@ Demilio的答案非常适合隐藏默认选择框。使用自定义样式，您可以根据需要更改选择框的外观。

唯一剩下的问题是箭头/插入符号也已消失，如@romainnm所述。

不幸的是，伪元素（例如：after）不适用于select元素，因此唯一的方法是在select之后创建一个实际元素，如<div class="Caret"></div>。

添加一些样式：

.Caret {
  display: block;
  position: absolute;
  cursor: pointer;
  right: 1rem;
  top: 50%;
  margin-top: -1px;
  width: 0;
  height: 0;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

这应该会产生带箭头的自定义样式选择框：

不幸的是，唯一的缺点是点击箭头不会打开选择框，而且似乎也无法解决JavaScript问题。

Answer 4

这里有趣的测试 http://cssdeck.com/labs/styling-select-box-with-css3

作者用右侧的箭头覆盖并创建了自己的箭头，使用供应商前缀的css来定位不同的浏览器。在这之后，你的填充都是免费的。

Answer 5

您可以使用边框为您的选择元素添加内边距和添加边框本身的轮廓

.select {
    border: 12px solid #FFF;
    outline: 1px solid #000;
}

假设您有白色背景，这将用作 12px 填充，但它也会向箭头添加填充

Answer 6

select {
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 97%;
}