- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text input field, step 4</title>
<meta charset="utf-8">
<link rel="stylesheet" href="material.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="purple-theme">
<section class="card">
<h1 class="question"><span>What was the very first web browser was called?</span></h1>
<form class="answers" action="https://echo.htmlacademy.ru/courses" method="post">
<button class="fab" type="submit"></button>
<div>
<input type="text" required>
<div class="label-box">
<label>Word in English</label>
</div>
</div>
</form>
</section>
</body>
</html>
CSS
.label-box {
position: relative;
width: 270px;
}
.label-box::before,
.label-box::after {
position: absolute;
bottom: 1px;
width: 50%;
height: 2px;
background-color: #757575;
content: "";
}
.label-box::before {
left: 50%;
}
.label-box::after {
right: 50%;
}
input:focus ~ .label-box::before,
input:focus ~ .label-box::after {
}
input {
box-sizing: border-box;
padding: 5px;
width: 270px;
border: none;
border-bottom: 1px solid #757575;
font-size: 18px;
}
label {
position: absolute;
top: -36px;
color: #757575;
font-size: 18px;
transition: 0.2s ease all;
pointer-events: none;
}
input:focus ~ .label-box label,
input:valid ~ .label-box label {
font-size: 14px;
transform: translateY(-20px);
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Change the width of the pseudo-elements
.label-box::before, .label-box::afterto0, - and when the input field is switched to a focused state, assign a width of
50%to the pseudo-elements. - Finally, assign a smooth transition for the
widthproperty of the.label-box::before, .label-box::afterpseudo-elements that is0.2sin duration.
Click inside and outside of the input field in order to test the result.
- Select the correct answer to the quiz question, and press the round button to check your answer.
Comments