Question

我正在使用Bootstrap中的浮动标签示例，但无法使它适用于“ select”元素。我希望“选择”元素的标签与“输入”的功能相同。 https://www.bootply.com/zBo1RcUZ1o#

Answer 1

您可以使用（1）Propeller Select lib或（2）Pure CSS...。请遵循示例：

（1）

<template>
    <input type="text" name="data" v-model="data" class="form-control">
</template>

<script>
  export default {
    data () {
      return {
          data: ''
      }
    }
  }
</script>

Link

（2）

-HTML-

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

-CSS-

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

DEMO

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

1 个答案: