Css 在选择框中填充

我知道用css设计选择框有点麻烦，但是如果不使用高级技术，我是否可以添加一些填充物来向下推文本，而不向右侧的箭头添加填充物？

这里有一个有趣的测试

---

作者覆盖了右边的箭头，并创建了自己的箭头，使用带有供应商前缀的css来针对不同的浏览器。完成此操作后，您的填充将完全免费。

将其添加到您的CSS类中。也许这有帮助

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

---

由于

select

框在不同浏览器，尤其是操作系统上的显示方式不同，因此无法保证一致性

例如，我可以在mac电脑上进行的最小格式化量如下：

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

看起来是这样的：

---

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

剩下的唯一问题是箭头/插入符号，正如@romainnm所提到的，箭头/插入符号也不见了

不幸的是，伪元素（例如：after）不适用于select元素，因此唯一的解决方法是在select之后创建一个实际的元素，比如

添加一些样式：

.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似乎也无法解决这一问题。

您可以使用border向select元素添加填充，并使用outline添加边框本身

。选择{
边框：12px实心#FFF；
外形：1px固体#000；
}

您是否可以尝试更改嵌套的“option”元素上的填充？只是一个想法…不，没有。选择框上的样式设置就像您提到的一样，是一个难题。正是由于这个原因，有许多用于选择框的jQuery插件可用。列表框可用的跨浏览器样式非常有限。这不是您所希望的吗？不，我只需要显示选项的填充，而不需要下拉列表中的任何填充@Wasbazi我就是这么做的，但正如您所看到的，它也会在右侧填充箭头。只需正常添加字体大小和填充，然后添加最大高度属性，使选择框与其他输入字段一样具有高度。通常只有firefox需要最大高度，因为它比其他浏览器略高。。我应该得到那些反对票。这不是我的密码。不过这很有趣，而且它是一个纯css解决方案，在90%的情况下都可以使用。链接已经失效，你可以更新它吗？@HadrienTOMA-不，不是吗？但是，我不会在2020年采取这种方法。谢谢你回来，我有以下错误：致命错误：未捕获异常“MongoConnectionException”，在/var/www/cssdeck.com/app/modules/labs/models/PastebinM.php:281堆栈跟踪：#0/var/www/cssdeck.com/app/modules/labs/models/PastebinM.php（281）：MongoClient->u构造（）#1/var/www/cssdeck.com/app/modules/labs/controllers/HomeC.php（52）：PastebinM->get（'styleing-select-…'）#2[内部函数]：HomeC->index（'styleing-select-…'）…听起来cssdeck网站（）有问题。。这不是我的代码，也不是我的站点：-Dso您有什么建议吗？我建议您使用一个自定义的选择框，例如：请参阅下面的我的答案，了解如何添加回插入符号箭头您可以使用

指针事件：无

也可以单击图标打开选择框。这很好，但最好的解决方案可能是为显示插入符号/箭头的select元素使用背景

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%;
}