包含額外文字的下拉列表

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;
        }