[html] checkbox 와 radio 스타일링

웹접근성 작업을 하는 중에 발견한 것

​

checkbox와 radio input태그의 스타일링 가능했었음

대박 대박

ㄴㅇㄱ

(label에 먹이는 스타일링 아님)

 

참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/radio

<input type="radio"> - HTML: Hypertext Markup Language | MDN

 

렛츠기릿

 

html

<div class="radio-box">
    <input type="radio" name="ox" id="o" checked>
    <label for="o"> O </label>
    <input type="radio" name="ox" id="x">
    <label for="x"> X </label>
</div>

css

.radio-box input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;  /* 요까지 스타일링 초기화 */
    width:15px;
    height:15px;
    border:1px solid black;
}
.radio-box input[type="radio"]:checked { /* checked 된 radio input 스타일링 */
    border: 6px solid red;
    border-radius: 15px;
}

이러면 결과는

두둥탁

이제까지 스타일링 안되는줄알고 input[type="radio"] + label 로

라디오 인풋은 opacity:0; position:absolute; 처리하고 label에 백그라운드 이미지를 넣어주는 식으로 작업을 했었는데,

이게 되는거였구나 ...

​

그랬구나 ,,,

​

checkbox도 마찬가지

https://codesandbox.io/s/falling-surf-pz1uog?file=/index.html

falling-surf-pz1uog - CodeSandbox

오늘도 하나 더 배워따잉

 

 

/* 0527 추가 */

​

망할 IE에서도 사용해야한다고 해서 IE에서도 css를 잡아줘야하는 상황이 생겨버려따

위에 css대로 작성하면 IE 에서는 안먹힘 !! IE 썩 꺼져 !!

맘 같아선 6월 15일까지 버티고 싶지만,, 아직도 2주가 넘게 남아있으니,, 방법을 찾아보았다

 

IE를 쥬긴다🔪

(현재 22.11.29 IE는 쥬겄다🔪)

​

초간단

IE에서도 수정하려면 input 뒤에 ::-ms-check를 써주고 css를 작성해주자

.radio-box input[type="radio"]::-ms-check { /* IE radio(또는 checkbox)*/
    width:15px;
    height:15px;
    border:1px solid black;
}
.radio-box input[type="radio"]:checked::-ms-check { /* checked 된 IE radio(또는 checkbox) */
    border: 6px solid red;
    border-radius: 0;
}