Как создать ярлыки начальной загрузки?

Question

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

я хочу создать с помощью HTML и CSS

Answer 1

Существует способ, вы можете сделать это с чистым 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%; 
} 

Demo

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

Demo

Codepen Pen

Answer 2

Это должно быть голой Minumum реализации.

input[type="text"] { 
 
\t outline: none; 
 
\t background: transparent; 
 
\t border: none; 
 
    border-bottom: 1px solid gray; 
 
\t margin: 5px 15px; 
 
\t line-height: 1.4em; 
 
} 
 

 
.has-success input:focus, .has-success input:active { 
 
\t border-bottom: 1px solid green; 
 
\t color: green; 
 
} 
 

 
.has-error input:focus, .has-error input:active { 
 
\t border-bottom: 1px solid red; 
 
\t color: red; 
 
}

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

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