javascript - 包含额外文本的下拉列表

Question

我想制作一个下拉列表。我应该通过javascript控制红色文本吗？

Answer 1

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

预览

Working JS fiddle

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