javascript - 如何创建这样的 Bootstrap 标签？

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>