选择下拉后，选择一个仍在角落中显示的标题

Question

我正在尝试创建一个选择下拉列表，其中＆＃34;默认＆＃34;即使在做出选择之后，也会显示在下拉菜单的左上角。我从这样的事情开始：

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

但我想做这样的事情：

有没有办法将跨度文本放在当前所选选项的正上方，如上图所示？

Answer 1

虽然这不是最优雅的解决方案，但您可以做一些俗气的事情，并在下拉菜单上手动定位跨度，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

reusableViewIdentifier

＆＃13;

#custom-container {
  position: relative;
  font-family: 'Arial';
  font-size: 14px;
}

select {
  padding: 25px 30px 5px 5px;
}

span {
  position: absolute;
  left: 10px;
  top: 5px;
  display: block;
  z-index: 1;
  color: blue;
}

＆＃13;

＆＃13;

＆＃13;