사용자 정의 라디오 버튼 나는 그들이 같을 것이다, 그래서 내 라디오 버튼을 사용자 정의 할

볼 수 없습니다 다음사용자 정의 라디오 버튼 나는 그들이 같을 것이다, 그래서 내 라디오 버튼을 사용자 정의 할

enter image description here

이를 달성하기 위해, 나는 다음과 같은 CSS와 HTML을 사용

HTML :

<div class="buttonSlider"> 
    <input type="radio" value=".."></input> 
    <input type="radio" value=".."></input> 
    <input type="radio" value=".."></input> 
</div>

CSS :

.buttonSlider { 
    font-size: 250%; 
    background: #ccffdd; 
} 

.buttonSlider input[type="radio"] { /* don't show the radio check items */ 
    display: none; 
} 

.buttonSlider label { 
    display:inline-block; 
    background-color:#ddd; 
    padding:4px 11px; 
    font-family:Arial; 
    font-size:16px; 
} 

.buttonSlider input[type="radio"]:checked + .buttonSlider label { 
    background-color:#bbb; 
}

그러나이 CSS를 라디오 버튼에 적용하면 버튼이 보이지 않습니다.

누군가 내게 그/그녀의 설명을 도우려고 도와 줄 수 있습니까? 나는 CSS에 꽤 새로운 사람이다.

출처

2013-06-11 Bram

은'표시하는 데 도움이 : 없음을 그들은 표시되지 않는 이유 '입니다. – Albzi

예를 들어 표시 할 것이 없기 때문에 아무것도 표시되지 않습니다. 예제에 레이블을 추가하십시오. –

마크 업에 어떤 라벨도 보이지 않습니까? – Kyle

체크 박스없이 작동 예입니다. 어쩌면

http://jsfiddle.net/zCBBf/1/

.radio-box 
{ 
background-color:black; 
height:53px; 
width:535px; 
padding:4px; 
} 

.radio-box label {  
    display:inline-block; 
    background-color:#ddd; 
    padding:17px 60px; 
    font-family:Arial; 
    font-size:16px; 
} 
input[type="radio"] { 
    display:none; 
} 

.radio-box input[type="radio"]:checked + label{ 
    background-color:red; 
}

출처

2013-06-11 11:10:45 spring

그래서 당신은뿐만 아니라 것을 제거 할 필요는

.buttonSlider input[type="radio"]:checked + label { 
    background-color:#bbb; 
}

해야합니다 그리고 당신은 display:none;

.buttonSlider input[type="radio"] { /* don't show the radio check items */ 
    display: none; 
}

을 다하고 있습니다.

이를 참조하십시오

http://jsfiddle.net/JSWorld/zCBBf/

출처

2013-06-11 10:08:50

이 시도 :

여기

<head > 
    <title></title> 

    <style> 
     .buttonSlider 
     { 
     background-color: #800001; 
     } 
     .buttonSlider .radiobox 
     { 
      height: 20px; 
      width: 100px; 
      border: 1px solid black; 
      background-color: #800001; 
      float: left; 
     } 
     .buttonSlider input 
     { 
      display: none; 
     } 
    </style> 


    <script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('.buttonSlider input').replaceWith('<div class="radiobox"> <input type="radio" name="radio1" value=".."/></div>'); 
      $('.buttonSlider input').prop('checked', false); 
      $('.radiobox').click(function() { 
       var this_div = $(this); 
       if (this_div.find('input').is(':checked')) { 
        this_div.find('input').prop('checked', false); 
        this_div.css({ 'background-color': '#800001' }); 
       } 
       else { 
        this_div.find('input').prop('checked', true); 
        this_div.css({ 'background-color': '#808080' }); 
       } 

      }) 
     }) 
    </script> 
</head> 
<body> 
    <div class="buttonSlider"> 
     <input type="radio" value=".." name="radio1" /> 
     <input type="radio" value=".." name="radio1" /> 
     <input type="radio" value=".." name="radio1" /> 
    </div> 
</body> 
</html>

출처

2013-06-11 10:24:09 falguni

사용자 정의 라디오 버튼 나는 그들이 같을 것이다, 그래서 내 라디오 버튼을 사용자 정의 할

답변

관련 문제