css radio 만들기

폼요소의 input 타입 radio 를 만들어 보자 

checkbox는 중복 선택이 가능하며 radio 버튼은 단일 선택만 가능!

 

---

 

1. html 작성 

가로로 배치할수 있도록 div wrap을 사용해 그룹으로 감아준다.

시각장애인용 웹 접근성을 위해 class명 bilnd

글자를 선택해도 체크 될수 있도록 label for 지정 

같은 그룹의 name은 같게 id명은 순서대로 label과 꼭 일치하게 만든다.

 

                <div class="agree_bottom">
                  <div class="radio_wrap">
                    <input class="bilnd" id="fruit1" type="radio" name="fruit" checked>
                    <label for="fruit1">딸기</label>
                  </div>
                  <div class="radio_wrap">
                    <input class="bilnd" id="fruit2" type="radio" name="fruit">
                    <label class="bilnd" for="fruit2">사과</label>
                  </div>
                  <div class="radio_wrap">
                    <input id="fruit3" type="radio" name="fruit">
                    <label for="fruit3">메론</label>
                  </div>
                </div>

 

 

---

2. 공통클래스 기존 디자인 초기화 해주기  

 

/* 폼요소의 높이가 다를때 요소끼리 세로정렬시킴, ios 둥근모서리, 기본스타일 제거 */
/* border-radius:0 -> iOS에서 테두리가 둥글게 나오므로 빼줌 */
/* -webkit-appearance: none -> iOS에서 폼요소에 내부그림자가 나오므로 빼줌 */
input, select, textarea, button {
 vertical-align: middle; 
 margin: 0; padding: 0; 
 border-radius: 0; 
 -webkit-appearance: none; 
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); 
 }

 

그럼 기본으로 들어가있는

라디오 박스 디자인이 초기화 된다.

 

 

 

 

체크박스 만들기 참고

https://hyojinny.tistory.com/82

 

---

3. 공통클래스로 꾸며주기

 

3-1 가로로 좌우정렬

 .radio_wrap { display: inline-block;}

인라인 블록시에 좌우 상하 다 컨트롤 가능 

 

---

 

3-2 글씨에 마우스 가져가면 포인트 변경

 

input[type=radio] + label {

    cursor: pointer;

    position: relative;

}

---

 

3-3 글씨에 마우스 가져가면 포인트 변경

기존 브라우저 디자인 대신 

동그라미 디자인을 변경해준다.

 

input[type=radio] + label:before {

    content: '';

    display: inline-block;

    height: 18px;

    width: 18px;

    border-radius: 50%;

    border: 2px solid #ddd;

    vertical-align: -4px;

    margin-right: 6px;

}

 

---

 

3-4 체크했을떄 모양 표시모양변경

체크하면 포인트로 동그라미가 체크되게 한다.

 

 

input[type=radio]:checked + label:after{

    position: absolute;

    content: '';

    left: 5px;

    top: 50%;

    width: 8px;

    height: 8px;

    margin-top: -2px;

    border-radius: 50%;

    background: #009223;

}