문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== CSS :checked Selector ======
<WRAP left notice 80%>
  * description : %%CSS :checked%% Selector 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-01
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article====
[[https://www.w3schools.com/csSref/sel_checked.asp|CSS :checked Selector]]\\

====Example====
선택된(checked) 모든 <input> 요소의 높이와 너비를 설정합니다.\\
<code css>
  <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>
</code>

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

=====CSS Syntax=====
<code css>
:checked {
   css declarations;
}
</code>

=====More Examples=====

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

<code css>
  <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>
</code>











{{tag>오션, CSS :checked Selecltor,}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구