css

<img>요소 사용해서 input type=”checkbox”, input type=”radio” 스타일 변경하기

핑계/ editor

  • 0 comments
  • 3,670 views
  • 2017년 9월 1일

아이콘 img를 사용해서 input type=”radio”, input type=”checkbox” 스타일을 변경해보아요 ~

아래 그림처럼 input type=”radio”, input type=”checkbox” 의 스타일을 <img>요소를 사용해서 변경해 볼께요


HTML5AROUND on html5around.com

 

 

1. input type=”checkbox” 스타일 변경하기


 

마크업 할때 신경써야 할 부분은 <label>요소로 <input>을 감싸지 말고
<input>부분과 <label>부분을 나눠서 마크업 해줘야 합니다!
이유는 <input>부분을 ‘display: none’으로 안보이게 하고
그 부분을 원하는 <img>요소로 변경하기 위해서
입니다.

대신에 ‘id’와 ‘label for’ 를 사용해서 <label>요소와 <input>요소를 꼭 연결시켜 주세요
그래야 글씨부분을 클릭해도 앞에 체크박스가 선택되니깐요.
잊지 말아주세요!!(중요중요)

Markup

   
        input type="checkbox"        
               
  •                 // id                 // label for 값 같게            
  •            
  •                 // id                 // label for 값 같게            
  •            
  •                 // id                 // label for 값 같게            
  •            
  •                 // id                 // label for 값 같게            
  •            
  •                 // id                 // label for 값 같게            
  •        
   

CSS

/* reset style */
body {
        margin: 0;
}
ul, ol {    /* ul, il 브라우저 기본 스타일 없애기 */  
        margin-top: 0;     
        margin-bottom: 0;  
        padding-left: 0;   
        list-style: none;  
}

/* checkbox */
.checkbox li {
        font-size: 15px;
}
.checkbox li + li {    /* li와 li 사이 간격 조절 */ 
        margin-top: 10px;
}

HTML5AROUND on html5around.com

이제 기본적인 스타일의 checkbox 가 완성됐네요
아래에 있는 아이콘으로 checkbox 의 이미지를 변경해볼께요.

추가 CSS

/* reset style */
body {
        margin: 0;
}
ul, ol {
        margin-top: 0;     
        margin-bottom: 0;  
        padding-left: 0;   
        list-style: none;  
}

/* checkbox */
.checkbox li {
        font-size: 15px;
}
.checkbox li + li { 
        margin-top: 10px;
}

/* 추가 CSS */
input[type='checkbox'] {
        display: none;    /* 실제 체크박스 없애기 */
}
.checkbox input[type='checkbox'] + label::before {    /* 가짜 체크박스 만들기 */
        content: ' '; 
        display: inline-block; 
        width: 21px; 
        height: 18px;
        vertical-align: middle;    /* img 아이콘 항상 세로정렬을 하기 위함 */
        margin: -5px 5px 0 0; 
        background: url('checkbox-on-off.png');    /* 하위 브라우저용 img */
        background: url('checkbox-on-off.svg');    /* svg 파일 적용 */
}
.checkbox input[type='checkbox']:checked + label::before {    /* 가짜 체크박스 체크했을 때 */
        background: url('checkbox-on-off.png');    /* 하위 브라우저용 img */
        background: url('checkbox-on-off.svg');    /* svg 파일 적용 */
        background-position: 21px 0;
}

HTML5AROUND on html5around.com

이렇게 해서 checkbox 이미지가 변경되었습니다.

png 이미지는 확대하면 깨지기 때문에 svg파일도 같이 적용하였습니다.
svg를 적용하지 않는 브라우저를 고려하기 위해서 png 파일을 먼저 적용하고 아래쪽에 svg 파일을 적용했습니다.

 

 

2. input type=”radio” 스타일 변경하기


 

input type=”checkbox” 이미지 변경하는 방법과 같습니다.

Markup

   
        input type="radio"        
               
  •                 // id                 // label for 값 같게            
  •            
  •                 // id                 // label for 값 같게            
  •            
  •                 // id                 // label for 값 같게            
  •        
   

CSS

/* radio */
.radio li {
        font-size: 25px;
}
.radio li + li {    /* li와 li 사이 간격 조절 */ 
        margin-top: 20px;
}

HTML5AROUND on html5around.com

이제 기본적인 스타일의 radio버튼이 완성됐네요
아래에 있는 아이콘으로 radio버튼의 이미지를 변경해볼께요.

추가 CSS

/* radio */
.radio li {
        font-size: 25px;
}
.radio li + li {    /* li와 li 사이 간격 조절 */ 
        margin-top: 20px;
}

/* 추가 CSS */
.radio input[type='radio'] {
        display: none;    /* 실제 라디오버튼 없애기 */
}
.radio input[type='radio'] + label::before {    /* 가짜 라디오버튼 만들기 */
        content: ' '; 
        display: inline-block; 
        width: 20px; 
        height: 18px;
        vertical-align: middle;    /* img 아이콘 항상 세로정렬을 하기 위함 */ 
        margin: -5px 10px 0 0; 
        background: url('radio-on-off.png');    /* 하위 브라우저용 img */
        background: url('radio-on-off.svg');    /* svg 파일 적용 */
}
.radio input[type='radio']:checked + label::before {    /* 가짜 라디오버튼 체크했을 때 */
        background: url('radio-on-off.png');    /* 하위 브라우저용 img */
        background: url('radio-on-off.svg');    /* svg 파일 적용 */
        background-position: 20px 0;
}

HTML5AROUND on html5around.com

이렇게 해서 radio 버튼 이미지가 변경되었습니다.

png 이미지는 확대하면 깨지기 때문에 svg파일도 같이 적용하였습니다.
svg를 적용하지 않는 브라우저를 고려하기 위해서 png 파일을 먼저 적용하고 아래쪽에 svg 파일을 적용했습니다.

 


 

<input> 부분을 ‘display: none’으로 브라우저상에서 없애버린 이유는
position 속성을 사용하지 않기 위해서였습니다.

‘opacity: 0’ 이나 다른방법으로 <input> 요소를 안보이게 하면 그 자리에 빈 공간이 존재하게 되어
position 값을 사용해서 이미지 아이콘을 배치하여야 합니다.

그래서 ‘display: none’ 을 사용해서 깔끔하게 브라우저상에서 없애버리고
margin 속성을 사용해서 이미지 아이콘을 배치 하였으니 참고해주세요 ~

이 말씀을 드리는 이유는…
‘display: none’ 을 사용하면 IE 8부터는 <input> 부분이 아예 사라져버리기 때문입니다. ㅜㅠ
IE 8을 고려하지 않는 디자이너 분이라면 위 방법을 사용해도 상관 없습니다 ~!

참고해주세요 ~

핑계

댓글 먹고 살아요~

Leave a Reply

avatar