html - 如何在选择框选项中显示星号？

Question

我想知道有没有办法在select元素的第一个option后面加星号？

这是我的html

<select class="form-control textyformcontrol">
   <option selected>Service area</option>
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</select>

这是css

.textyformcontrol {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #fff !important;
    background: transparent;
    border-radius: 0px;
    color: #fff;
    font-size: 16px;
    padding: 10px 0px;
    word-spacing: 2px;
    height: auto;
}

所有的选项都是默认的白色。那么如何通过css在红色中添加星号呢？

Answer 1

以下解决方案为每个option 元素添加了一个红色星号，该元素不具有selected 属性:

.textyformcontrol option[selected]:after {
  content: "";
}

.textyformcontrol option:after {
  content: "*";
  color: red;
}

请看我的演示here .