WEB/CSS

radio box css변경

나나나나나나나ㅏ나난ㄴ나ㅏ나나 2020. 1. 3. 14:05
728x90

기본적인 radio 박스에서 벗어나 내가 원하는 css를 적용하기 위한 방법이다.

       input[type=radio]{
            background-color: #FFFF;
            -webkit-appearance: none;
            -moz-appearance: none;
            margin-left: 16px;
            border: 1px solid rgb(216, 216, 216);
            width: 14px;
            height: 14px;
            border-radius: 100%;
        }
        input[type=radio]:checked{
            background-color: rgb(25, 118, 248);
            -webkit-appearance: none;
            -moz-appearance: none;
            margin-left: 16px;
            border: none;
            width: 14px;
            height: 14px;
            border-radius: 100%;
        }

 

appearance: none 으로 이미 설정 되어있는 기본적인 radio의 css를 제거해주어야 다른 css가 적용된다!

728x90

'WEB > CSS' 카테고리의 다른 글

label로 체크모양 만들기  (0) 2020.02.13
HTML 과 CSS 기초  (0) 2020.02.04
div 글자수 제한 css  (0) 2020.01.20
[css] placeholder 디자인 변경  (0) 2019.12.24
div에 그림자 넣기 (box-shadow)  (0) 2019.12.24