包含额外文字的下拉列表

Question

I want to make a drop down list. should I control the red text from javascript?

Answer 1

If you want static text, it can be done using css as displayed in code below, otherwise you can change the text of extraText class using javascript.

Preview

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