48 lines
956 B
CSS
48 lines
956 B
CSS
|
.form__group {
|
||
|
|
position: relative;
|
||
|
|
padding: 15px 0 0;
|
||
|
|
margin-top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__field {
|
||
|
|
font-family: inherit;
|
||
|
|
width: 100%;
|
||
|
|
border: 0;
|
||
|
|
border-bottom: 2px solid #9b9b9b;
|
||
|
|
outline: 0;
|
||
|
|
font-size: 1em;
|
||
|
|
color: #333;
|
||
|
|
padding: 7px 0;
|
||
|
|
background: transparent;
|
||
|
|
transition: border-color 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__field::placeholder {
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__field:focus::placeholder {
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__field:focus {
|
||
|
|
padding-bottom: 6px;
|
||
|
|
border-width: 3px;
|
||
|
|
border-image: linear-gradient(to right, #477493, #0f719b);
|
||
|
|
border-image-slice: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__field_bad_input {
|
||
|
|
padding-bottom: 6px;
|
||
|
|
font-weight: 700;
|
||
|
|
border-width: 3px;
|
||
|
|
border-image: linear-gradient(to right, #f91d1d, #9f4a4a);
|
||
|
|
border-image-slice: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* reset input */
|
||
|
|
.form__field:required, .form__field:invalid {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|