라디오 버튼 동그라미 커스텀 하기

라디오버튼을 구현 하다 보면 조금 더 디자인에 맞게 라디오 버튼의 동그라미 부분을 커스텀 하고 싶을 때가 있다. 

그럴때는 이미 기본으로 잡혀져 있는 구성들을 none 처리 해준 뒤 (여기서 다른 웹 사이트들의 기본 설정도 none 처리 해줌) 원하는 모양 대로 그려 나가면 된다. 

 

 

See the Pen Untitled by Kate lee (@Kate-lee-the-encoder) on CodePen.

 

 

 input[type='radio'] { //input type이 radio인 모든 것들 
  -webkit-appearance: none;  //웹킷 기본 구성 없음 처리 
  appearance: none; // 기본 브라우저에서 스타일 제거 
  width: 20px; //원하는 사이즈  
  height: 20px;
  border: 1px solid #FF0000; // 테두리  
  border-radius: 50%; //둥글기 (20정도로 하면 네모에 가까운 버튼이 생성 된다) 
  outline: none;  
  cursor: pointer; //가져다 댈대 손가락 모양으로 바뀌게 하기
}

input[type='radio']:checked { //라디오 박스가 클릭 되었다면 , 
  background-color: #FF0000; // 색상 
  border: 3px solid #fff;  //밖의 테두리와 원 사이의 색상 
  box-shadow: 0 0 0 1px #FF0000; // 테두리 
}

 

 

근데 나는 동그라미 말고 체크 박스가 하고 싶은데? 하면 html에서 input 의 type 을 바꿔주면 된다. 

색상 커스텀도 똑같이 해주면 된다! 

<input type="radio" id="option2" name="option" value="0">
↓  ↓  ↓  ↓  
<input type="checkbox" id="option1" name="option" value="1">