包含额外文字的下拉列表

Question

我想做一个下拉列表。 我应该从javascript控制红色文字吗？

Answer 1

如果需要静态文本，可以使用css完成，如下面的代码所示，否则，可以使用javascript更改extraText类的文本。

预习

工作的JS小提琴

的HTML

<div class="selectContainer">
    <select>
      <option>English</option>
      <option>Hindi</option>
      <option>Gujarati</option>
    </select>
   <div class="extraText">Preferred Language</div>
</div>

的CSS

       .selectContainer{
            width:200px;
            margin: 10px;
            position: relative;
        }
        .selectContainer select{
            width: 100%;
        }
        .extraText{
            position: absolute;
            right: 20px;
            top:2px;
            color:#db4040;
            font-weight: bold;
            font-size: smaller;
        }