[selector] CSS - :default 가상선택자 - 폼(form) 요소 안 요소 중 기본 선택된 요소들을 선택 (= default선택자 = 디폴트선택자 = 기본선택자)

1. :default 예제 - 폼 요소 안 선택자 중 기본 선택된 요소들을 선택
2. :default 정의
3. :default 구문
4. :default 예제 - INPUT 라디오, INPUT 체크박스, OPTION 경우

:default 예제 - 폼 요소 안 선택자 중 기본 선택된 요소들을 선택

 

<style> 

label { display: block;  margin-top: 5px; }

input:default {box-shadow: 0 0 2px 2px red; }

</style>

<form>

  <p>초급언어 선택</p>

  <label><input name="b_lang" type="radio" value="html" checked>HTML</label>

  <label><input name="b_lang" type="radio" value="css"> CSS</label>

  <label><input name="b_lang" type="radio" value="js"> JS</label>

  <p>중급언어 선택</p>

  <label><input name="s_lang" type="checkbox" checked>PHP</label>

  <label><input name="s_lang" type="checkbox">SQL</label> 

</form>

 

결과보기

:default 정의

 

폼(form) 요소 안 요소 중 기본 선택된 요소들을 선택하는 선택자.

 

---

 

1. 아래 요소들에 한해서 사용 가능.

 

• <button> 요소 중, type="submit" 갖는 요소 (즉, 폼에서 Enter키 눌렀을 때 자동실행되는 버튼인 기본(submit) 버튼 요소.)
• <input type="checkbox"> 요소 중, checked 속성 보유 요소
• <input type="radio"> 요소 중, checked 속성 보유 요소
• <option> 요소 중, selected 속성 보유 요소

  

2. 

• CSS3
• IE 제외한 주요 최신 브라우저 모두 지원.

 

:default 구문

 

:default { CSS 선언; }

 

:default 예제 - INPUT 라디오, INPUT 체크박스, OPTION 경우

 

<style> 

label { 

  display: block;  margin-top: 5px; 

}    

input[type=radio]:default {

  box-shadow: 0 0 5px 3px red;

}

input[type=checkbox]:default {

  box-shadow: 0 0 5px 3px blue;

}

option:default {

  color: red;

  background-color: yellow;  

}

</style>

<form>

  <p>초급언어 선택</p>

  <label><input name="b_lang" type="radio" value="html" checked>HTML</label>

  <label><input name="b_lang" type="radio" value="css"> CSS</label>

  <label><input name="b_lang" type="radio" value="js"> JS</label>

  <p>중급언어 선택</p>

  <label><input name="s_lang" type="checkbox" checked>PHP</label>

  <label><input name="s_lang" type="checkbox">SQL</label> 

    

  <p>본인 코딩수준 선택</p>

  <select name="level" id="level">

    <option value="1">1레벨</option>

    <option value="2" selected>2레벨</option>

    <option value="3">3레벨</option>

  </select>    

</form>

 

결과보기