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

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

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

不要忘记在父position: relative上设置.select-option，我会稍微更改您的代码，以便将width: 50%移至parent并在width: 100%上设置select {1}}。

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

更多信息here。

最后一句话是，这是一个常见问题，您无法在::after上设置::before或select option可能有很多主题与此标题，谷歌，stackoverflow等..无论如何。

选择不在选择器

1 个答案: