在

Question

我无法找到任何相关信息，甚至不确定它在HTML中是否可行，但我想在值上方显示 Label 行在选择字段中，例如＆＃34; EXP MONTH / YEAR＆＃34;在下图中：

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

Answer 1

我可能有点晚了，但是：你不需要任何特别的东西，它只是简单的形成。 将标签放在表单的顶部，包装两个标签并在div中选择，然后调整背景颜色和边框。参见示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>更新

我以某种方式记得我有这篇文章。因为我已经改进了它用于个人使用，这是版本更好（你可以点击选择内的任何地方 - 它将触发下拉列表，而在以前的版本中你可以选择）我认为我应该分享我做的更新我的代码并从那时开始使用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用以下代码，我已在此处引用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>