如何在表单 <select> 元素上创建浮动标签？答案

【问题标题】：How to create floating label on form <select> element?如何在表单 <select> 元素上创建浮动标签？
【发布时间】：2019-10-13 10:45:09
【问题描述】：

我正在使用 Bootstrap 中的浮动标签示例，但无法使其适用于“选择”元素。我希望“选择”元素的标签与“输入”的功能相同。

https://www.bootply.com/zBo1RcUZ1o#

【问题讨论】：

标签： forms select floating-labels

【解决方案1】：

您可以使用 (1)Propeller Select lib 或 (2)Pure CSS.... 跟随示例：

(1)

<div class="form-group pmd-textfield pmd-textfield-floating-label">
    <label for="propeller-select">Select with Floating Label</label>
    <select id="propeller-select" class="form-control">
        <option></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

Link

(2)

-HTML-

  <div class="floating-label">  
      <select class="floating-select" onclick="this.setAttribute('value', this.value);" value="">
        <option value=""></option>
        <option value="1">Item1</option>
        <option value="2">Item2</option>
        <option value="3">Item3</option>
        <option value="4">Item4</option>
        <option value="5">Item5</option>
      </select>
      <label>Select</label>
</div>

-CSS-

.floating-label { 
  position:relative; 
  margin-bottom:20px; 
}

.floating-select {
  font-size:14px;
  padding:4px 4px;
  display:block;
  width:100%;
  height:30px;
  background-color: transparent;
  border:none;
  border-bottom:1px solid #757575;
}

.floating-select:focus {
     outline:none;
     border-bottom:2px solid #5264AE; 
}

label {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE;
}

/* active state */
.floating-select:focus ~ .floating-select:focus ~  {
  width:50%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* active state */
 .floating-select:focus ~  {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

DEMO

【讨论】：