选择器后不添加伪类

Question

选择器后不添加伪类

3

我想在我的选择框中添加一个font-awesome箭头，但是:after选择器似乎没有被应用：

由于某种原因，焦点也没有被应用。

select {
  border: 1px solid #727272;
  -webkit-appearance: none;
  border-radius: 0;
  width: 50%;
  padding: 10px;
}

.select:after {
  content: "\F0DA";
  font-family: FontAwesome;
  font-size: 20px;
  color: black;
}

select:focus: {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 0;
}

<div>
  <select class="select">
    <option>One</option>
    <option>Two</option>
  </select>
</div>

- dagda1

1

你不能在 select 元素上添加 pseudo 元素。 - Pedram

你需要一个包装元素来使伪元素起作用。 - Tah

好的。您想让图标出现在哪里？控件本身外面吗？至于您的第二个问题，那是由于打字错误引起的（第二个冒号）。 - Mr Lister

2个回答

0

虽然Pedram的答案完全正确，但值得注意的是，如果您需要使用Javascript更改

- Chris Pink

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pedram · Accepted Answer

如我在评论中所说，您不能在select上使用pseudo，而是需要将您的select包装在一个div中，然后在该div上使用pseudo。

select {
    border: 1px solid #727272;
    -webkit-appearance: none;
    border-radius: 0;
    width: 100%;
    padding: 10px;
}
.select-option {
position: relative;
width: 50%;
}

.select-option::after {
    content: "\F0DA";
    font-family: FontAwesome;
    font-size: 20px;
    color: black;
    position: absolute;
    right: 10px;
    top: 7px;
}

select:focus {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="select-option">
  <select class="select">
    <option>One</option>
    <option>Two</option>
  </select>
</div>

如果你想使用这个箭头来代替select默认的选项箭头，那么你需要为::after元素设置position:absolute。请注意不要删除html标签。

.select-option::after {
    content: "\F0DA";
    font-family: FontAwesome;
    font-size: 20px;
    color: black;
    position: absolute;
    right: 10px;
    top: 7px;
}

不要忘记在父元素 .select-option 上设置 position: relative，我稍微修改了你的代码将 width: 50% 移动到了 parent 上，并在 select 上设置了 width: 100%。

请注意，正确的写法是 ::after 而不是 :after。 CSS3 引入了带有两个冒号的 ::after 符号来区分伪类和伪元素。浏览器也接受 :after，这是在 CSS2 中引入的。

更多信息请参见此处。

最后一点是，这是一个常见问题，可能无法在 select option 上设置 ::after 或 ::before，可能有许多与此标题相关的主题，可以在 Google、Stack Overflow 等网站上查找。