如何在选择框选项中显示astrisk？

Question

我想知道在select元素的第一个选项之后是否有任何方法可以添加星号？

这是我的 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

以下解决方案为每个{strong> 具有option属性的selected元素添加了一个红色星号：

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

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

请参阅我的演示here。