목차

CSS :checked Selector

  • description : CSS :checked Selector
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-07-01


The source of this article

CSS :checked Selector

Example

선택된(checked) 모든 <input> 요소의 높이와 너비를 설정합니다.

  <style>
    input:checked {
      height: 50px;
      width: 50px;
    }
  </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>

Definition and Usage

:checked 선택자는 모든 선택된 <input> 요소 (라디오 버튼 및 체크박스만 해당) 및 <option> 요소와 일치합니다.

CSS Syntax

:checked {
   css declarations;
}

More Examples

Example

선택한 모든 <option> 요소인 텍스트의 폰트 크기와 두께, 컬러가 변경됩니다.

  <style>
    option:checked {
      /* height: 100px;
      width: 100px; */
      color: red;
      font-weight: bolder;
      font-size: 20px;
    }
  </style>
</head>
<body>
 
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
 
</body>
, , ,