Входные данные, отображаемые заполнителями (HTML код)
<form>
<div class="input-container input-container--1">
<input id="name1" placeholder=" " class="input" />
<label for="name1" class="label">
<span class="label-text">
Name
</span>
</label>
</div>
<div class="input-container input-container--2">
<input id="occupation" placeholder="Creative web developer" class="input" required />
<label for="occupation" class="label">
<span class="label-text">
Occupation
</span>
</label>
</div>
<div class="input-container input-container--3">
<input id="color" placeholder="Favorite HTML color" class="input" />
<label for="color" class="label">
<span class="label-text">
Favorite HTML color
</span>
<span class="explain" data-explain="Mine is hotpink">?</span>
</label>
</div>
<div class="input-container input-container--4">
<input id="portfolio website" placeholder=" " class="input" />
<label for="portfolio website" class="label">
<span class="label-text">
Portfolio website
</span>
</label>
</div>
</form>
Входные данные, отображаемые заполнителями (CSS код)
@import url("https://rsms.me/inter/inter.css");
* {
box-sizing: border-box;
font-family: "Inter", Inter, sans-serif;
font-weight: 500;
}
body {
margin: 0;
display: flex;
background: #fff;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.input-container {
position: relative;
display: flex;
flex-direction: column-reverse;
margin: 1.5rem 0;
}
.input-container--1 .input:-moz-placeholder-shown ~ label, .input-container--4 .input:-moz-placeholder-shown ~ label {
transform: translateY(0);
font-size: 1rem;
}
.input-container--1 .input:-ms-input-placeholder ~ label, .input-container--4 .input:-ms-input-placeholder ~ label {
transform: translateY(0);
font-size: 1rem;
}
.input-container--1 .input:placeholder-shown ~ label, .input-container--4 .input:placeholder-shown ~ label {
transform: translateY(0);
font-size: 1rem;
}
.input-container--1 .input:focus ~ label, .input-container--4 .input:focus ~ label {
transform: translateY(-1rem);
font-size: 10px;
}
.input-container--3 .input::-moz-placeholder {
-moz-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
.input-container--3 .input:-ms-input-placeholder {
-ms-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
.input-container--3 .input::placeholder {
transition: opacity 0.4s ease-out;
}
.input-container--3 .input:-moz-placeholder-shown ~ label {
clip-path: inset(0 -500px 0 100%);
-moz-transition: clip-path 0.4s ease-out;
transition: clip-path 0.4s ease-out;
}
.input-container--3 .input:-ms-input-placeholder ~ label {
clip-path: inset(0 -500px 0 100%);
-ms-transition: clip-path 0.4s ease-out;
transition: clip-path 0.4s ease-out;
}
.input-container--3 .input:placeholder-shown ~ label {
-webkit-clip-path: inset(0 -500px 0 100%);
clip-path: inset(0 -500px 0 100%);
transition: -webkit-clip-path 0.4s ease-out;
transition: clip-path 0.4s ease-out;
transition: clip-path 0.4s ease-out, -webkit-clip-path 0.4s ease-out;
}
.input-container--3 .input:focus::-moz-placeholder {
opacity: 0;
}
.input-container--3 .input:focus:-ms-input-placeholder {
opacity: 0;
}
.input-container--3 .input:focus::placeholder {
opacity: 0;
}
.input-container--3 .input:focus ~ label {
-webkit-clip-path: inset(0 -500px 0 0);
clip-path: inset(0 -500px 0 0);
}
.input-container--3 .label {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
-webkit-clip-path: inset(0 -500px 0 0);
clip-path: inset(0 -500px 0 0);
}
.input-container--4 .input {
border-radius: 0.25rem;
transition: border-color 0.4s ease-out, border-radius 0.4s ease-out;
}
.input-container--4 .input:-moz-placeholder-shown {
border-radius: 2rem;
}
.input-container--4 .input:-ms-input-placeholder {
border-radius: 2rem;
}
.input-container--4 .input:placeholder-shown {
border-radius: 2rem;
}
.input {
padding: 0.5rem 1rem;
border-radius: 2rem;
border: 1px solid #9f9f9f;
font-size: 1rem;
transition: border-color 0.4s ease-out;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.input:focus {
outline: none;
border-color: #353535;
}
.input[required] {
border-color: #04aa6d;
}
.input[required] ~ label::before {
right: 1.45rem;
}
.input[required] ~ label::after {
position: relative;
content: " *";
}
.input[required]:-moz-placeholder-shown {
border-color: #9f9f9f;
}
.input[required]:-ms-input-placeholder {
border-color: #9f9f9f;
}
.input[required]:placeholder-shown {
border-color: #9f9f9f;
}
.label {
position: absolute;
top: 0;
transform: translateY(-1rem);
font-size: 10px;
padding: 0.5rem 1rem;
color: #353535;
transition: transform 0.4s ease-out, font-size 0.4s ease-out;
border: 1px solid transparent;
}
.label .label-text {
position: relative;
}
.label::before {
content: "";
position: absolute;
top: 0.75rem;
left: 1rem;
right: 1rem;
bottom: 0.5rem;
inset: 0.75rem 1rem 0.5rem;
background: #fff;
z-index: 0;
}
.explain {
position: relative;
background: #353535;
border-radius: 50%;
padding: 0.1rem 0.3rem;
margin-left: 0.25rem;
color: #fff;
display: block;
}
.explain:hover::before, .explain:hover::after {
opacity: 1;
}
.explain::before {
content: attr(data-explain);
position: absolute;
top: 0;
left: 1.15rem;
height: 100%;
padding: 0.1rem 0.25rem;
display: block;
background: inherit;
white-space: nowrap;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
.explain::after {
content: "";
position: absolute;
left: 0.65rem;
top: 50%;
transform: translateY(-50%);
border: 4px solid transparent;
border-right-color: #353535;
}
.explain::before, .explain::after {
opacity: 0;
transition: opacity 0.3s ease-out;
}
Входные данные, отображаемые заполнителями (Результат кода)
Comments