I created a radio button css following tips on the *, but there is a little detail missing.
我按照*的提示创建了一个单选按钮css,但是缺少一些细节。
It prints out a red square instead of default radio button icon, but when I click it, nothing happens.
它打印出一个红色方块而不是默认的单选按钮图标,但是当我点击它时,没有任何反应。
There is the code: In the for loop I have:
有代码:在for循环中我有:
$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>';
And I adjusted the css:
我调整了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;
}
1 个解决方案
#1
0
Have tried some workaround with CSS only to make it work (used 3 radios for testing, you can make it from the loop).
尝试过使用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 }
Ok, let me explain how this works. There are 3 hidden radio-buttons hidden with display:none style. Label for each of radio-buttons contains div element (to simulate custom-draw of circles) and course text. I have placed text inside span pair and changed its background to white (or any background color you want).
好的,让我解释一下这是如何工作的。显示屏隐藏了3个隐藏的单选按钮:无样式。每个单选按钮的标签包含div元素(模拟圆圈的自定义绘制)和课程文本。我已将文本放在span对中,并将其背景更改为白色(或任何您想要的背景颜色)。
After click on label you change background color of entire label, but white background of your text make it visually unaffected. That means that you can change colored-area of label just simply changing dimensions of inline div in front of text. Because div was placed inside label pair, you can get same click effect by clicking on colored squares too.
单击标签后,您可以更改整个标签的背景颜色,但文本的白色背景使其在视觉上不受影响。这意味着您只需更改文本前面的内联div的尺寸即可更改标签的彩色区域。因为div被放置在标签对中,所以通过单击彩色方块也可以获得相同的点击效果。
Actually, with label's width style-property you can define width of colored block. To change height you probably have to deal with margins, padding, font-size, or even by making more complex nested structure of div elements.
实际上,使用label的width样式属性,您可以定义彩色块的宽度。要改变高度,您可能需要处理边距,填充,字体大小,甚至通过制作更复杂的div元素嵌套结构。
Honestly, this was my first attempt to make something like this. Never used anything similar in my life. So it's certainly not perfect solution, but at least consider it and try to make something usable to fit your needs.
老实说,这是我第一次尝试制作这样的东西。从未使用过我生活中类似的东西。所以它肯定不是完美的解决方案,但至少要考虑它并尝试使某些东西可以满足您的需求。
Hope you can use it.
希望你能用它。
#1
0
Have tried some workaround with CSS only to make it work (used 3 radios for testing, you can make it from the loop).
尝试过使用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 }
Ok, let me explain how this works. There are 3 hidden radio-buttons hidden with display:none style. Label for each of radio-buttons contains div element (to simulate custom-draw of circles) and course text. I have placed text inside span pair and changed its background to white (or any background color you want).
好的,让我解释一下这是如何工作的。显示屏隐藏了3个隐藏的单选按钮:无样式。每个单选按钮的标签包含div元素(模拟圆圈的自定义绘制)和课程文本。我已将文本放在span对中,并将其背景更改为白色(或任何您想要的背景颜色)。
After click on label you change background color of entire label, but white background of your text make it visually unaffected. That means that you can change colored-area of label just simply changing dimensions of inline div in front of text. Because div was placed inside label pair, you can get same click effect by clicking on colored squares too.
单击标签后,您可以更改整个标签的背景颜色,但文本的白色背景使其在视觉上不受影响。这意味着您只需更改文本前面的内联div的尺寸即可更改标签的彩色区域。因为div被放置在标签对中,所以通过单击彩色方块也可以获得相同的点击效果。
Actually, with label's width style-property you can define width of colored block. To change height you probably have to deal with margins, padding, font-size, or even by making more complex nested structure of div elements.
实际上,使用label的width样式属性,您可以定义彩色块的宽度。要改变高度,您可能需要处理边距,填充,字体大小,甚至通过制作更复杂的div元素嵌套结构。
Honestly, this was my first attempt to make something like this. Never used anything similar in my life. So it's certainly not perfect solution, but at least consider it and try to make something usable to fit your needs.
老实说,这是我第一次尝试制作这样的东西。从未使用过我生活中类似的东西。所以它肯定不是完美的解决方案,但至少要考虑它并尝试使某些东西可以满足您的需求。
Hope you can use it.
希望你能用它。