Блог

Я хотел создать ввод, подобный этому. Когда вы нажимаете на ярлык, появляется фиолетовая линия. Когда вы нажимаете на ввод успеха, под ярлыком появляется зеленая строка. Когда вы нажимаете на ввод строки ошибки, под вводом появляется красная строка.

я хочу создавать с использованием html и css

Это должна быть минимальная реализация.

 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>  

Есть способ сделать это с помощью чистого 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 с именем placeholder . Это необходимо для последующего эффекта прокрутки вверх при фокусировке ввода. Также вам понадобится немного 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