Question

我正在使用找到的here CSS来制作浮动表单标签。我选择了这种样式，因为不需要JavaScript，HTML标记很简单（即div有一个类，然后只有一个label和input标记。如果还有其他简单的样式表，请告诉我。

我是一名后端开发人员，我很擅长CSS而无法弄清楚如何调整这个CSS，所以它在以下情况下看起来不错：

有一个选择标记（<select/>而不是<input/>标记）
当背景不是白色时

任何帮助将不胜感激！

    <form class="float-label" spellcheck="false">
  <legend>Float Label Demo</legend>

  <!-- we need a wrapping element for positioning the label -->
  <!-- the required attribute is ... required! -->
  <div class="control">
    <input type="text" name="title" placeholder="Title" required />
    <!-- yes, this is not nice, in real live, do it with JS -->
    <label for="title">Title</label>
  </div>

  <div class="control small">
    <input type="text" name="price" placeholder="Price" required />
    <label for="price">Price</label>
  </div>
  <div class="control medium">
    <input type="text" name="location" placeholder="Specific location (optional)" required />
    <label for="location">Specific location (optional)</label>
  </div>

  <div class="control">
    <textarea name="description" placeholder="Description" required></textarea>
    <label for="description">Description</label>
  </div>

</form>

@border: 1px solid #ddd;
@padding: 10px;
@label-font-size: 13px;

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

body {
  width: 100%;
  min-height: 300px;
}

// Demo styles
form {
  width: 600px;
  margin: 2em auto;

  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;

  legend {
    font-size: 2em;
    margin-bottom: 1em;
    width: 100%;
    border-bottom: @border;
  }
}


// float label
.float-label {
  .control {
    float: left;
    position: relative;
    width: 100%;
    border-bottom: @border;
    padding-top: @padding + @label-font-size;
    padding-bottom: @padding;

    // you proably want to replace these with your grid classes
    &.small {
      width: 30%;
      border-right: @border;
    }

    &.medium {
      width: 70%;
      padding-left: @padding;
    }

    &:last-child {
     border: 0;
    }
  }

  input, textarea {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    resize: none;

    // inactive but shown label (exceptions: opacity and top)
    & + label {
      position: absolute;
      top: 10px;
      transition: top 0.7s ease, opacity 0.7s ease;
      opacity: 0;

      // Some nice styling
      font-size: @label-font-size;
      font-weight: 600;
      color: #ccc;
    }

    // THE MAGIC
    // as soon as we start typing, the "required" attribute will
    // set the state to valid and our pseudo selector will match
    &:valid + label {
      opacity: 1;
      top: 3px;
    }

    // and we highlight the focused input label
    &:focus + label {
      color: #2c8efe;
    }
  }
}

以下是背景为黑色时的样式：

Answer 1

您已经复制了Less（非编译的CSS），这些浏览器无法在浏览器中正确呈现 - 因此，如果您将来从CodePen中获取示例，请记住：）

输入具有透明背景，适合任何背景颜色（或图案），因此如果您更改身体/父母的背景颜色，它仍然会很好

这可能就是你要找的东西：

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  width: 100%;
  min-height: 300px;
  background-color: #000;
}
form {
  width: 600px;
  margin: 2em auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;
}
form legend {
  font-size: 2em;
  margin-bottom: 1em;
  width: 100%;
  border-bottom: 1px solid #333;
}
.float-label .control {
  float: left;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #333;
  padding-top: 23px;
  padding-bottom: 10px;
}
.float-label .control.small {
  width: 30%;
  border-right: 1px solid #333;
}
.float-label .control.medium {
  width: 70%;
  padding-left: 10px;
}
.float-label .control:last-child {
  border: 0;
}
.float-label select,
.float-label input,
.float-label textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #fff;
}

.float-label select + label,
.float-label input + label,
.float-label textarea + label {
  position: absolute;
  top: 10px;
  transition: top 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
}


.float-label select:focus + label,
.float-label input:valid + label,
.float-label textarea:valid + label {
  opacity: 1;
  top: 3px;
}

.float-label select:focus + label,
.float-label input:focus + label,
.float-label textarea:focus + label {
  color: #ccc;
}

<form class="float-label" spellcheck="false">
  <legend>Float Label Demo</legend>
  
  <!-- we need a wrapping element for positioning the label -->
  <!-- the required attribute is ... required! -->
  <div class="control">
    <input type="text" name="title" placeholder="Title" required />
    <!-- yes, this is not nice, in real live, do it with JS -->
    <label for="title">Title</label>
  </div>
 
  <div class="control small">
    <input type="text" name="price" placeholder="Price" required />
    <label for="price">Price</label>
  </div>
  <div class="control medium">
    <input type="text" name="location" placeholder="Specific location (optional)" required />
    <label for="location">Specific location (optional)</label>
  </div>
  
  <div class="control">
    <select>
    <option>option 1</option>
      <option>option 2</option>
    </select>
    <label for="description">Description</label>
  </div>
  
</form>

Answer 2

将此代码添加到样式表中：

.float-label select,
.float-label input,
.float-label textarea {
  background: transparent;
}

您将获得具有透明背景的<input>，<textarea>和<select>。因此，您可以稍后将背景颜色更改为您选择的颜色，而不会对表单字段背景颜色产生任何紧张。

谢谢你 Nabeel

Answer 3

看看

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  width: 100%;
  min-height: 300px;
  background-color: #000;
}
form {
  width: 600px;
  margin: 2em auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;
}
form legend {
  font-size: 2em;
  margin-bottom: 1em;
  width: 100%;
  border-bottom: 1px solid #333;
}
.float-label .control {
  float: left;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #333;
  padding-top: 23px;
  padding-bottom: 10px;
}
.float-label .control.small {
  width: 30%;
  border-right: 1px solid #333;
}
.float-label .control.medium {
  width: 70%;
  padding-left: 10px;
}
.float-label .control:last-child {
  border: 0;
}
.float-label select,
.float-label input,
.float-label textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #fff;
}

.float-label select + label,
.float-label input + label,
.float-label textarea + label {
  position: absolute;
  top: 10px;
  transition: top 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
}


.float-label select:focus + label,
.float-label input:valid + label,
.float-label textarea:valid + label {
  opacity: 1;
  top: 3px;
}

.float-label select:focus + label,
.float-label input:focus + label,
.float-label textarea:focus + label {
  color: #ccc;
}
option{color:#000;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    
-webkit-box-shadow: 0 0 0 1000px #000 inset !important; 
    -webkit-text-fill-color: #ccc !important;
    }

＆＃13;

<form class="float-label" spellcheck="false">
  <legend>Float Label Demo</legend>
  
  <!-- we need a wrapping element for positioning the label -->
  <!-- the required attribute is ... required! -->
  <div class="control">
    <input type="text" name="title" placeholder="Title" required />
    <!-- yes, this is not nice, in real live, do it with JS -->
    <label for="title">Title</label>
  </div>
 
  <div class="control small">
    <input type="text" name="price" placeholder="Price" required />
    <label for="price">Price</label>
  </div>
  <div class="control medium">
    <input type="text" name="location" placeholder="Specific location (optional)" required />
    <label for="location">Specific location (optional)</label>
  </div>
  
  <div class="control">
    <select>
    <option>option 1</option>
      <option>option 2</option>
    </select>
    <label for="description">Description</label>
  </div>
  
</form>

＆＃13;

Answer 4

一个简单的答案是直接改变输入的背景颜色。

像这样;

输入{background-color：blue;}

您可以将其复制/粘贴到CSS中并使用您想要的任何颜色。我把这个CSS放到W3schools.com的下面的html代码中并得到了这个：

<!DOCTYPE html>
<html>

<body>

  <form action="">
    User name:
    <br>

    <style>
      input {
        background-color: blue;
      }
    </style>
    <input type="text" name="userid">
    <br>User password:
    <br>
    <input type="password" name="psw">
  </form>

  <p>The characters in a password field are masked (shown as asterisks or circles).</p>

</body>

</html>

我希望这适合你！

浮动标签样式

4 个答案: