javascript - 给下拉菜单选择一个标题，该标题在做出选择后仍显示在 Angular 落

Question

我正在尝试创建一个选择下拉菜单，即使在做出选择后，“默认”也会显示在下拉菜单的左上角。我从这样的事情开始:

<select>
 <option selected hidden>Currency</option>
 <option value="USD">USD</option>
 <option value="MEX">MEX</option>            
</select>

但是我想做这样的事情:

有没有办法像上图那样将跨度文本放置在当前所选选项的正上方？

Answer 1

虽然这不是最优雅的解决方案，但您可以做一些俗气的事情并手动在下拉列表上放置一个跨度，如下所示:

select {
    padding: 23px 0px 7px 6px;
    width: 110px;
    font-family: 'Arial';
    border-radius: 4px;
    border: 1px solid #999;
}

span.cover {
    display: block;
    margin-top: -40px;
    margin-bottom: 40px;
    margin-left: 10px;
    font-family: 'Arial';
    font-size: 12px;
    color: #199ddb;
}

body {
    background-color: #199ddb;
}

<select>
    <option>USD</option>
    <option>MEX</option>
</select>
<span class="cover">Currency</span>

<select>
    <option>Mr.</option>
    <option>Mrs.</option>
    <option>Ms.</option>
</select>
<span class="cover">Title</span>