13

我知道选择框使用 css 进行样式设置有点痛苦，但是如果不采用高级技术，无论如何我可以添加一些填充来稍微下推文本，而无需在右侧的箭头上添加填充？

4

6 回答 6

22

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

-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
于 2014-01-10T09:45:20.180 回答
4

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

例如，我可以在 mac 上进行的最少格式化是这样的：

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

它看起来像这样：

选择框

于 2014-01-10T10:36:30.730 回答
4

@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 解决。

于 2018-04-09T02:30:04.723 回答
1

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

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

于 2013-08-10T21:19:59.590 回答
0 
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%;
}
于 2021-06-01T14:53:02.057 回答
0

您可以使用边框为您的选择元素添加填充，并使用轮廓添加边框本身

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

假设你有一个白色背景，这将作为 12px 填充，但它也会为箭头添加填充

于 2021-05-28T11:12:54.317 回答