[CSS 활용]css 활용 예제 - 라디오 버튼을 활용한 선택 버튼 디자인

 

 

라디오 버튼 태그 활용 - 버튼 디자인 CSS

모바일이나 웹에서 두 가지 중 하나를 택해야 하는 선택지가 있을 경우, 
라디오 버튼 보다는 버튼 형태를 많이 사용하는데 
기능은 라디오 버튼 기능을 갖지만 모양은 css로 버튼 형태로 주기. 
 
 
 

HTML

라디오 버튼에서, 텍스트를 눌렀을때 같이 선택되게 하려면  
id속성과 label for속성을 같게 설정한다. 
tag label 속성
 

 <div class="select">
     <input type="radio" id="select" name="shop"><label for="select">미혼</label>
     <input type="radio" id="select2" name="shop"><label for="select2">기혼</label>
</div>

 
 

CSS 

타입 선택자/인접 선택자 - input[type=radio]+label
 
선택자 종류 상세
 

.select {
    padding: 15px 10px;
}
.select input[type=radio]{
    display: none;
}
.select input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    height: 24px;
    width: 90px;
    border: 1px solid #333;
    line-height: 24px;
    text-align: center;
    font-weight:bold;
    font-size:13px;
}
.select input[type=radio]+label{
    background-color: #fff;
    color: #333;
}
.select input[type=radio]:checked+label{
    background-color: #333;
    color: #fff;
}

 
 
 

결과