input (체크박스, 라디오버튼) 스타일 설정 및 디자인 입히기

 

 

 

input type css

퍼블리싱을 할때 심심한 체크박스나 라디오버튼같은 인풋타입을 꾸며주고 싶을 때가 있는데요!

이미지를 이용해서 체크박스, 라디오버튼에 디자인을 입혀주는 방법을 보여드리려고 합니다.

<input type="radio"> <label>option</label>

 

 

 

위처럼 코딩을 하고 아래쪽에 정리된 스타일 시트를 적용해 주면 됩니다.

<style>
input[type="radio"]:not(old){
	width:24px;
    opacity: 0;}

input[type="radio"]:not(old) + label {
	display:inline-block;
    background:url('check_off.png') no-repeat;
    width:24px;
    height:24px;
    margin-left:-24px;
    padding-left:24px;}

input[type="radio"]:not(old):checked + label {
	display:inline-block;
    background:url('check_on.png') no-repeat;
    width:24px;
    height:24px;
    margin-left:-24px;
    padding-left:24px;}
</style>

css 스타일 원리를 알려드리면

input[type="radio"]:not(old) 에서 투명도를 빼서 기존 디자인을 지워주고

input[type="radio"]:not(old) + label과 input[type="radio"]:not(old):checked + label 라벨에 백그라운드 이미지를 넣은 후에 투명해진 인풋 라디오로 마진값을 주는 원리입니다.

​

여기서 input[type="radio"]:not(old) + label 는 라벨을 뜻하고 input[type="radio"]:not(old):checked + label 은 체크된 라디오박스의 라벨을 뜻합니다.

​

좋은 사이트와 예제를 찾아서 함께 첨부해드리니 잘 모르겠다 싶으신 분들은 아래 첨부파일을 다운받아서 한번 살펴보세요.

​

참고로 제가 작업한 방법은 on, off 이미지를 따로 만들어서 컨트롤했구요.

첨부해드린 사이트에서는 이미지 하나에 on, off를 다 넣어준 후에 포지션을 컨트롤해서 표현했습니다.

 

 

 

Styling checkboxes and radio buttons with CSS

examples.zip

0.00MB