- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text input field, step 3</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 {
}
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
- Assign the following to the
.label-box::beforepseudo-element: the contentscontent: "", absolute positioning, height of2px, width of50%, background color of#757575, - and coordinates of
bottom: 1pxandleft: 50%. - Assign the following to the
.label-box::afterpseudo-element: the contentscontent: "", absolute positioning, height of2px, width of50%, background color of#757575, - and coordinates of
bottom: 1pxandright: 50%.
Comments