<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="field">
<input type="text" id="username" placeholder="..." />
<label for="username">username</label>
</div>
</body>
</html>
css
.field {
position: relative;
}
.field input {
color: #565656;
background: none;
padding: 0.625rem;
border: 2px solid #030104;
}
.field label{
position: absolute;
top: 0;
left: 0;
translate: 0.625rem 0.625rem;
color:#030104;
background-color: #efe4f7;
padding-inline: 0.25rem;
border: 2px solid transparent;
pointer-events: none;
transition: translate 250ms, background-color 250ms, border-color 250ms;
}
.field:focus-within label,
.field:not(:has(:placeholder-shown))
label {
translate: 0.625rem -1rem;
border-color: #030104;
}
.field ::placeholder {
color: transparent;
}
'프론트엔드 > HTML' 카테고리의 다른 글
| box-sizing 요소의 크기를 계산하기 위한 기준을 지정할 때 사용되는 속성 (0) | 2023.10.26 |
|---|---|
| position 속성의 기본값은 static 이다. (0) | 2023.10.26 |
| grid 활용2 (문으로 이용한 활용) (0) | 2023.10.25 |
| grid 활용법 (0) | 2023.10.25 |
| CSS 띄움을 이용한 실습 (0) | 2023.10.25 |