Question

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

我想使用html和css

创建

Answer 1

这应该是一个简单的实现。

＆＃13;

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

＆＃13;

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

＆＃13;

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%;
}

<强>演示

Codepen Pen

带有浮动标签的材料输入

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

与第一个想法相比，我试图保持HTML结构尽可能相似。最终得到了这个结构。只需从输入中删除占位符标记，并在父div上添加一个名为占位符的数据属性。这对于稍后在输入焦点上的向上滑动效果是必需的。此外，您还需要一点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");
  }
});

<强>演示

Codepen Pen

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

2 个答案: