在 WebKit 中使用 CSS 时 < select > 和: after 的问题

我想添加一些样式的选择框与伪: 后(风格我的选择框有2个部分，没有图像)。下面是 HTML:

<select name="">
<option value="">Test</option>
</select>

但是没用。我不知道为什么，也没有在 W3C 规范中找到答案。这是 CSS:

select {
-webkit-appearance: none;
background: black;
border: none;
border-radius: 0;
color: white;
}


select:after {
content: " ";
display: inline-block;
width: 24px; height: 24px;
background: blue;
}

这是正常现象还是有什么诡计？

215338 次浏览
小开
最佳答案

我还没有详细检查过这个，但是我的印象是这个还没有(还没有?)由于 select元素是由运行浏览器的操作系统而不是浏览器本身生成的。

小开

面对同样的问题，也许这是一个解决方案:

<select id="select-1">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<label for="select-1"></label>


#select-1 {
...
}


#select-1 + label:after {
...
}
小开

这篇文章可能对 http://bavotasan.com/2011/style-select-box-using-only-css/有所帮助

他使用一个带有类的外部 div 来解决这个问题。

<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
小开

我正在寻找同样的事情，因为我选择的背景是一样的箭头颜色。如前所述，在 select 元素上使用: before 或: after 添加任何内容都是不可能的。我的解决方案是创建一个包装器元素，在其上添加以下代码: before 代码。

.select-wrapper {
position: relative;
}


.select-wrapper:before {
content: '\f0d7';
font-family: FontAwesome;
color: #fff;
display: inline-block;
position: absolute;
right: 20px;
top: 15px;
pointer-events: none;
}

这是我选的

select {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background: #000;
color: #fff;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}


select::-ms-expand {
display: none;
}

我已经用 FontAwesome.io 作为我的新箭头，但你可以使用任何其他你想要的。显然，这不是一个完美的解决方案，但根据您的需要，这可能是足够的。

小开

这个解决方案类似于 sroy 的解决方案，但是用 css 三角形代替 web 字体:

.select-wrapper {
position: relative;
width: 200px;
}
.select-wrapper:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #666;
position: absolute;
right: 8px;
top: 8px;
pointer-events: none;
}
select {
background: #eee;
border: 0 !important;
border-radius: 0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
text-indent: 0.01px;
text-overflow: "";
font-size: inherit;
line-height: inherit;
width: 100%;
}
select::-ms-expand {
display: none;
}
<div class="select-wrapper">
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>

小开

这是我用 字体-太棒了编写的一个现代解决方案。为了简短起见，省略了厂商扩展。

超文本标示语言

<fieldset>
<label for="color">Select Color</label>
<div class="select-wrapper">
<select id="color">
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
</fieldset>

SCSS

fieldset {
.select-wrapper {
position: relative;


select {
appearance: none;
position: relative;
z-index: 1;
background: transparent;


+ i {
position: absolute;
top: 40%;
right: 15px;
}
}
}

如果您的 select 元素有一个已定义的背景颜色，那么这将不起作用，因为这个代码片段实际上将 Chevron 图标放在 select 元素后面(以允许点击图标顶部仍然启动 select 操作)。

但是，您可以将选择包装设置为与选择元素相同的大小，并设置其背景以实现相同的效果。

检查我的 CodePen为一个工作演示，显示这位代码在黑暗和光线主题的选择框使用常规标签和“占位符”标签和其他清理样式，如边框和宽度。

附注: 这是我今年早些时候对另一个重复问题的回答。

小开

根据我的经验，它根本不工作，除非你愿意包装你的 <select>在一些包装。但是您可以使用背景图像 SVG 来代替。例如。

    .archive .options select.opt {
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 1.25EM;
appearance: none;
position: relative;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.5EM 1EM;
background-position: right center;
background-clip: border-box;
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
}


.archive .options select.opt::-ms-expand {
display: none;
}

因为 IE 的存在，所以要小心使用正确的 URL 编码。您必须使用 charset=utf8(而不仅仅是 utf8) ，不要使用双引号(”)来划分 SVG 属性值，而是使用撇号(’)来简化您的生活。URL 编码 s (% 3E)。如果你必须打印任何非 ASCII 字符，你必须获得他们的 UTF-8表示(例如 BabelMap 可以帮助你) ，然后提供 URL 编码形式的表示-例如为 something (U+25BE BLACK DOWN-POINING SMALL TRIANGLE) UTF-8表示是 \xE2\x96\xBE，当 URL 编码时是 %E2%96%BE。

小开 
<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>

为了样式化 select，为什么不在 select 外面添加一个 div。

然后在 CSS 中设计样式

.select{
width: 100%;
height: 45px;
position: relative;
}
.select::after{
content: '\f0d7';
position: absolute;
top: 0px;
right: 10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0b660b;
font-size: 45px;
z-index: 2;


}
#dropdown{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
height: 45px;
width: 100%;
outline: none;
border: none;
border-bottom: 2px solid #0b660b;
font-size: 20px;
background-color: #0b660b23;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
小开

如果不能修改标记怎么办？

这里有一个不需要包装器的解决方案: 它在背景图像中使用 SVG。 您可能需要使用 HTML 实体解码器来理解如何更改填充颜色。

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


background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;

从 CSS-技巧偷来的。

小开

您可以使用 CSS 网格，并在 select 所在的单元格中放置一个图标(或其他任何图标) ，而不是使用包装器元素:

.select-field {
display: grid;
grid-template:
"label"
"select"
/ max-content;
}


.label {
grid-area: label;
}


.select {
appearance: none;
background: white;
border: 1px solid var(--border-color);
grid-area: select;
padding-block: 0.5ex;
padding-inline: 1ch calc(1ch + 1em);
}


.after {
align-self: center;
border-block-start: 0.5em solid var(--border-color);
border-inline: 0.5em solid transparent;
block-size: 0;
grid-area: select;
inline-size: 0;
justify-self: end;
margin-inline-end: 1ch;
pointer-events: none;
}


.select,
.select + .after {
--border-color: silver;
}


.select:hover,
.select:hover + .after {
--border-color: grey;
}


.select:focus,
.select:focus + .after {
--border-color: rebeccapurple;
}
<div class="select-field">
<label for="my-select" class="label">Select One</label>


<select id="my-select" class="select">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
  

<div class="after"></div>
</div>

在这里，我使用了一个空的 div，并将其设置为一个 CSS 三角形，其颜色与悬停/聚焦期间变化的边框颜色相同。

这里最重要的部分如下:

  • <select>和 <div class="after">进入相同的 grid-area(我将其命名为 select)。这会将空 div 置于 select 之上。
  • 给 <select>一个 none的 appearance。这将删除任何浏览器默认样式。
  • 给 <select>和额外的填充在行内方向的末尾，为空的样式腾出空间。
  • 从头到尾说明空 div 的合理性。
  • 在内联方向的末尾给空 div 一个额外的空白，以匹配所需的 <select>填充
  • 给这个空 div 一个 none的 pointer-events，这样单击就会通过它到达 <select>元素。

除此之外，您可以对空 div 执行任何操作。甚至不需要是空的。例如，你可以在里面放一个 svg 图标，如果你愿意的话。

小开

如果选择使用 select: : after 方法，请记住:

.select::after{
...
pointer-events: none;
...

点击。


提交答案