如何在CSS中浮动标签 [英] How to do floating of labels in CSS

问题描述

我想在输入中显示输入的标签，以便当我单击输入时，标签将进行动画处理并移到输入上方，并更改输入边框的样式。

I want to display the label of an input inside its input, so that when I click the input, the label will animate and go above the input and change the styles of the input's border.

像这样：

* {
  margin: 0;
  padding: 0;
}

form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  outline: 1px solid lightgrey;
  padding: 10px;
}

label, input[type='text'], input[type='password'] {
  font-size: 12pt;
  padding: 8px;
}

label {
  color: grey;
}

input {
  border: none;
  outline: none;
  border-bottom: 1px solid grey;
}

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text"/>
  <br/>

  <label for="password">Password</label>
  <input id="password" name="password" type="password"/>
  <br/>

  <input type="submit" value"login"/>
</form>

如何使用CSS实现呢？

How can I achieve this with CSS?

推荐答案

这看起来很像Google的新材料设计输入。

我为您创建了自定义输入，看起来像您想要的。

This looks a lot like the Google new material design inputs.
I created custom inputs for you that look like what you are looking for.

.input-group {
  position: relative;
  margin: 40px 0 20px;
}

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}

input:focus {
  outline: none;
}

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

input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #4285f4;
}

.bar {
  position: relative;
  display:block;
  width:315px;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4285f4;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* animations */
@-webkit-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}

<div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Username</label>
</div>

<div class="input-group">
  <input type="password" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Password</label>
</div>

这篇关于如何在CSS中浮动标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！