반응형
placeholder에 "name" 이라는 단어를 포함한
모든 input의 배경색을 pink로 설정해보기
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
input {
border: 1px solid wheat;
}
input:required {
border-color: tomato;
}
input[placeholder~="name"] {
background-color: pink;
}
</style>
</head>
<body>
<div>
<form>
<input type="text" placeholder="First name" />
<input type="text" placeholder="Last name" />
<input type="password" required placeholder="password" />
</form>
</div>
</body>
</html>
결과
유후 신기하구만
반응형
'2. CSS' 카테고리의 다른 글
| CSS Hover 마우스 오버 시 버튼 색상 변경하기 (0) | 2024.11.30 |
|---|---|
| CSS active 버튼 클릭 시 색깔 바뀌기 (0) | 2024.11.30 |
| CSS Pseudo Selectors / input[type="password"] {background-color: thistle;} (0) | 2024.11.29 |
| CSS required placeholder 에 테두리 색 넣기 (0) | 2024.11.29 |
| CSS Pseudo-classes 종류 (0) | 2024.11.29 |