잇스쿨

상태 선택자(checked, focus, enabled, disabled) 본문

퍼블리싱/CSS

상태 선택자(checked, focus, enabled, disabled)

잇님 2019. 3. 29. 13:19

상태 선택자

: 입력 양식의 상태를 선택할 때 사용하는 선택자

 

상태 선택자 설명 CSS Level ex
:cheked 체크 상태의 input 태그를 선택 CSS3 input:checked
:focus 포커스가 있는 input 태그를 선택 CSS2 input:focus
:enabled 사용 가능한 input 태그를 선택 CSS3 input:enabled
:disabled 사용 불가능한 input 태그를 선택 CSS3 input:disabled

 

:cheked

<!DOCTYPE html>
<html>
<head>
<style> 
input:checked {
  height: 20px;
  width: 20px;
}
</style>
</head>
<body>

<form action="">
  <input type="radio" checked="checked" value="male" name="gender"> Male<br>
  <input type="radio" value="female" name="gender"> Female<br>
  <input type="checkbox" checked="checked" value="Bike"> I have a bike<br>
  <input type="checkbox" value="Car"> I have a car 
</form>

</body>
</html>

 

:focus

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
}
</style>
</head>
<body>
<h1>The width Property</h1>

<p>Set the width of the input field to 100 pixels. However, when the input field gets focus, make it 250 pixels wide:</p>

Search: <input type="text" name="search">

</body>
</html>

 

:enabled / :disabled

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #fff;
}
</style>
</head>
<body>

<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

</body>
</html>

 

 

[참조] https://www.w3schools.com/ 

저작자표시 비영리 변경금지

'퍼블리싱 > CSS' 카테고리의 다른 글

svg 사용하기  (0) 2020.08.05
[CSS] word-break, word-wrap 속성  (0) 2020.07.09
calc() : 속성 값 계산한 결과 적용하는 함수  (0) 2019.04.02
[CSS] text-overflow 텍스트 긴 글 생략 기호로 표시  (0) 2019.04.01
css / clip 속성  (0) 2019.03.29
'퍼블리싱/CSS' Related Articles more