CSS로 클릭하면 라디오 버튼의 이미지가 바뀝니다

Question

stackoverflow에 대한 팁을 따라 라디오 버튼 CSS를 만들었지 만 약간의 세부 사항이 없습니다.

기본 라디오 버튼 아이콘 대신 빨간색 사각형을 인쇄하지만 클릭하면 아무 일도 발생하지 않습니다. 루프를 위해 내가 가진에서 :

이

코드입니다

$radioprint[$j] .= '<div class="radio"><div><input type="radio" name="radio'.$j.'" value="'.$radioarr[$j][$r].'"> 
<label for="radio'.$j.'"></label>'.$radioarr[$j][$r].'</div></div>'; 

그리고 나는 CSS를 조정 :

input[type=radio]{display:none;} 
label { 
width: 14px;height: 14px;display: inline-block;background-color: red;cursor: pointer; 
} 
input[type=radio]:checked + label { 
width: 14px;height: 14px;display: inline-block;background-color: green;cursor: pointer; 
} 

Answer 1

만 작동하도록 CSS 몇 가지 해결 방법을 시도 해 봤나 (사용을 테스트를 위해 3 라디오, 당신은 루프에서 만들 수 있습니다).

HTML :

<input class="rb" value="1" id="a1" type="radio" name="myradio" checked="checked"> 
<label for="a1" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 1</span></label><br /> 

<input class="rb" value="2" id="a2" type="radio" name="myradio"> 
<label for="a2" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 2</span></label><br /> 

<input class="rb" value="3" id="a3" type="radio" name="myradio"> 
<label for="a3" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 3</span></label> 

CSS :

.rb { display:none } 
.new_button {width:15px; display:inline-block} 
.whitespan { background-color: white } 
.radio_label { background-color:red; cursor: pointer } 
input[type=radio]:checked+label { background-color: green } 

좋아, 내가이 어떻게 작동하는지 설명 할 수 있습니다. 숨겨진 라디오 버튼 3 개가 display:none 스타일로 숨겨져 있습니다. 각 라디오 버튼의 레이블에는 div 요소 (원의 사용자 정의 그리기 시뮬레이션) 및 코스 텍스트가 포함됩니다. span 쌍 안에 텍스트를 배치하고 배경을 흰색 (또는 원하는 배경색)으로 변경했습니다.

label을 클릭하면 전체 라벨의 배경색이 변경되지만 텍스트의 흰색 배경은 시각적으로 영향을받지 않습니다. 즉, 텍스트 앞에 인라인 div의 치수를 변경하기 만하면 레이블의 색상 영역을 변경할 수 있습니다. div이 label 쌍 안에 배치되었으므로 색칠 된 사각형을 클릭하여 동일한 클릭 효과를 얻을 수 있습니다.

실제로 레이블의 width 스타일 속성을 사용하면 색상이 지정된 블록의 너비를 정의 할 수 있습니다. 고도를 변경하려면 margins, padding, font-size을 처리해야하며, 더 복잡한 nested div 요소 구조를 만들 수도 있습니다.

솔직히 말해서, 이것은 이와 같은 것을 만들기위한 나의 첫 번째 시도였습니다. 내 인생에서 비슷한 것을 사용하지 마십시오. 따라서 완벽한 해결책은 아니지만 최소한 고려하고 필요에 맞게 사용할 수 있도록하십시오.

희망 하시길 바랍니다.