텍스트가없는 CSS 사용자 정의 라디오 버튼

Question

레이블 또는 레이블 텍스트없이 순수 CSS로 사용자 정의 라디오 버튼을 스타일링하는 가장 좋은 방법을 찾아보십시오. 나는 그런 일했던 순간

: (다른 상태없이 확인, 장애인 등을위한)를 내 라디오 레이블을 가지고로 완벽하게 한 작동

input[type=radio] { 
width : 28px; 
margin : 0; 
padding : 0; 
opacity : 0; 

& + label { 
    background: url("radio_unselected.png") no-repeat 0 2px; 
    padding-left : 28px; 
    line-height : 24px; 
    cursor: pointer; 
} 

. 레이블을 제거하거나 레이블 텍스트를 제거하면 아무 것도 표시되지 않습니다. 내 목표를 달성하는 가장 좋은 방법은 무엇입니까? & + 레이블에서 배경 스타일을 제거하고 입력 자체의 배경으로 추가하고 라디오가 기본 라디오 스타일과 겹치지 않도록 위치를 조정해야합니까? 당신의 도움에 대한

타이, 앤디

편집 : 나는 실제로 여전히 때문에하지 완벽한 솔루션을 텍스트없이 레이블을 추가 할 수 있지만, 적어도

지금

&:before { 
    content:""; 
    display: inline-block; 
} 

내가 추가

label 태그가 필요합니다.

Answer 1

동일한 딜레마가 발생했습니다. 이미지 회전식 컨베이어의 페이지 매김 컨트롤로 라디오 버튼을 사용하고 싶습니다. 나는 이걸 생각해 냈다 :

input[type=radio] { 
    visibility: hidden; 
    position: relative; 

    margin-left: 5px; 
    width: 20px; 
    height: 20px; 
} 

input[type=radio]:before { 
    content: ""; 
    visibility: visible; 
    position: absolute; 

    border: 2px solid #eb6864; 
    border-radius: 50%; 

    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

input[type=radio]:checked:before { 
    background-color: #eb6864; 
} 

이것은 추가 마크 업없이 작동한다. 다음은 내 컨베이어에 사용하는 예입니다.

<input type='radio' name='test'> 
<input type='radio' name='test' checked> 
<input type='radio' name='test'> 
<input type='radio' name='test'> 
<input type='radio' name='test'> 

this fiddle을 참조하십시오. Chrome의 최근 빌드에서만 이것을 테스트했습니다. 나는 그것이 얼마나 호환되는지 전혀 모른다.

Answer 2

이 시도 :

HTML

<label> 
    <input type="radio" value="1"> 
    <div></div> 
</label> 

CSS

input[type="radio"] { 
    display: none; 
} 

input[type="radio"] + div { 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    cursor: pointer; 
    vertical-align: middle; 
    background: #FFF; 
    border: 1px solid #d2d2d2; 
    border-radius: 100%; 
} 

input[type="radio"] + div:hover { 
    border-color: #c2c2c2; 
} 

input[type="radio"]:checked + div { 
    background:gray; 
} 

DEMO : http://jsfiddle.net/nuzhysgg/

Answer 3

완벽한 솔루션이없는 것처럼 보입니다. 라디오 스타일을 변경하려면 실제로 레이블 또는 div/etc 태그와 같은 요소가 있어야합니다. 한 가지 가능성은 입력란 주변에 레이블이있는 라디오를 만드는 것입니다.

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

그런 다음 실제로 CSS를 통해 스타일을 추가하려고 할 수 있습니다. 제 생각에는 최선의 해결책은 아니지만 스타일을 훨씬 쉽게 만듭니다.