如何创建这样的引导标签？

Question

我想创建这样的输入。 单击标签时，将显示一条紫罗兰色的线。 单击成功输入时，标签下方会出现绿线。 当您单击错误行输入时，输入下方会出现红线。

我想使用HTML和CSS创建

Answer 1

这应该是最少的实现。

 input[type="text"] { outline: none; background: transparent; border: none; border-bottom: 1px solid gray; margin: 5px 15px; line-height: 1.4em; } .has-success input:focus, .has-success input:active { border-bottom: 1px solid green; color: green; } .has-error input:focus, .has-error input:active { border-bottom: 1px solid red; color: red; } 

 <div class="has-success"> <input type="text" value="success"> </div> <div class="has-error"> <input type="text" value="error"> </div> 

Answer 2

您可以使用纯HTML和CSS来实现此目的。

也许您甚至可以优化代码，但我想给您一个快速的想法。

的HTML

<div class="wrapper">
  <input id="name" type="text" placeholder="Username" />
  <label for="name"></label>
</div>

的CSS

.wrapper {
  position: relative;
  width: 200px;
}

input {
  width: 100%;
  background: none;
  padding: 10px;
  border: none;
  outline: none;
  margin-top: 10px;
}

label {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.4);
}

label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.4s;
}

input:focus ~ label:after {
  width: 100%;
}

演示版

代笔

带有浮动标签的物料输入

对于那些想要添加浮动标签功能的人。

与第一个想法相比，我试图使HTML结构尽可能相似。 终于在这种结构下工作了。 只需从输入中删除占位符标签，然后在父div上添加一个名为占位符的data属性。 这是稍后在输入焦点上向上滑动效果所必需的。 另外，您将需要一点JavaScript，因为您必须将一个类添加到父元素。

的HTML

<div class="wrapper" data-placeholder="Username">
    <input id="name" type="text" />
    <label for="name"></label>
</div>

的CSS

.wrapper {
  position: relative;
  width: 200px;
}

input {
  width: 100%;
  background: none;
  padding: 10px;
  border: none;
  outline: none;
}

label {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.4);
}

label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.4s;
}

input:focus ~ label:after {
  width: 100%;
}

.wrapper:before {
  content: attr(data-placeholder);
  position: relative;
  top: 30px;
  left: 10px;
  color: rgba(0, 0, 0, 0.4);
  transition: 0.3s;
  z-index: -1;
}

.wrapper.clicked:before {
  color: #000;
  top: 0;
  left: 0;
}

 .wrapper.clicked.filled:before {
  color: rgba(0,0,0,0.4);
}

jQuery的

$("input").focus(function() {
  $(this).parent().addClass("clicked");
  if ($(this).val().length > 0) {
    $(this).parent().removeClass("filled");
  }
});

$("input").blur(function() {
  if ($(this).val().length > 0) {
    $(this).parent().addClass("filled");
  } else {
    $(this).parent().removeClass("clicked filled");
  }
});

演示版

代笔