在选择内显示标签

Question

我找不到任何相关信息，甚至不确定它在 HTML 中是否可行，但我想在 中的 value 上方显示一个 Label 行>选择字段，如下图中的“EXP MONTH/YEAR”：

这可行吗？几天来我一直在寻找一种实现它的方法，但无济于事。谢谢！

Answer 1

试试下面的代码，我已经从这里引用了它，https://codepen.io/chriscoyier/pen/CiflJ

这并不是我想的你想要的，但它和那个很相似，而且更爵士，所以就玩这个，可能你喜欢它。

form {
  width: 320px;
  float: left;
  margin: 20px; 
  }
  
  form > div {
    position: relative;
    overflow: hidden;
    }
    
  form input, form textarea, form select {
    width: 100%;
    border: 2px solid gray;
    background: none;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 8px 12px;
    outline: 0;
    }
    
    form input:valid, form textarea:valid, form select:valid {
      background: white; }
      
    form input:focus, form textarea:focus, form select:focus {
      border-color: grey; }
      
    form input:focus + label, form textarea:focus + label, form select:focus + label {
      background: grey;
      color: white;
      font-size: 70%;
      padding: 1px 6px;
      z-index: 2;
      text-transform: uppercase; }
  
  form label {
    transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
    position: absolute;
    color: #999;
    padding: 7px 6px; }
  
  form textarea {
    display: block;
    resize: vertical; }

form.go-bottom input, form.go-bottom textarea, form.go-bottom select {
  padding: 12px 12px 12px 12px; }

form.go-bottom label {
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%; }

form.go-bottom input:focus, form.go-bottom textarea:focus, form.go-bottom select:focus {
  padding: 4px 6px 20px 6px; }

form.go-bottom input:focus + label, form.go-bottom textarea:focus + label, form.go-bottom select:focus + label {
  top: 100%;
  margin-top: -16px; }

<form class="go-bottom">
  <h2>To Bottom</h2>
  <div>

    <input id="name" name="name" type="text" required>
        <label for="name">Your Name</label>
  </div>
  <br/>
  <div>
    <select id="car">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
   </select>
   <label for="car">Car</label>
  </div>
  <br/>
  <div>
    <textarea id="message" name="phone" required></textarea>
    <label for="message">Message</label>
  </div>
</form>

Answer 2

我可能有点晚了，但是：你不需要什么特别的东西，它只是格式化。 将标签放在表单顶部，将标签和选择都包裹在一个 div 中，然后调整背景颜色和边框。看例子：

.select-wrap 
{
  border: 1px solid #777;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 0 5px 5px;
  width:200px;
  background-color:#ebebeb;
}

.select-wrap label
{
  font-size:10px;
  text-transform: uppercase;
  color: #777;
  padding: 2px 8px 0;
}

select
{
  background-color: #ebebeb;
  border:0px;
}

<div class="select-wrap">
  <label>Color</label>
  <select name="color" style="width: 100%;">
    <option value="">---</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
  </select>
</div>

---

更新

不知何故，我记得我有这篇文章。因为我已经对其进行了改进以供个人使用，并且这个版本更好（您可以单击选择内的任何位置 - 它会触发下拉菜单，而在以前的版本中您不能）我想我应该分享我对我的代码所做的更新并从那时起使用。

.select-wrap {
  border: 1px solid #777;
  border-radius: 4px;
  padding: 0 5px;
  width:200px;
  background-color:#fff;
  position:relative;
}
.select-wrap label{
  font-size:8px;
  text-transform: uppercase;
  color: #777;
  padding: 0 8px;  
  position: absolute;
  top:6px;
}

select{
  background-color: #fff;
  border:0px;
  height:50px;
  font-size: 16px;
}

<div class="select-wrap">
  <label>Color</label>
  <select name="color" style="width: 100%;">
    <option value="">---</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
  </select>
</div>