html - 选择不在选择器后添加伪

Question

我想在我的选择中添加一个很棒的字体箭头，但是 :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>

Answer 1

正如我在评论中所说，您不能在 select 上使用 pseudo，而是用 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 option箭头，你需要为::after设置position: absolute元素。

.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 中引入。

更多信息 here .

最后要说的是，这是一个常见问题，您无法在 select option 上设置 ::after 或 ::before可能有很多主题都带有这个标题，谷歌，stackoverflow 等等。无论如何。