我的HTML:
<div class="product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2">2</label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1">
<label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5">5</label>
</p>
</div>
我试图将这些收音机输入看起来像按钮,我几乎就在那里。问题在于,鉴于目前的构造(我无法直接改变),我无法弄清楚如何使:checked
选项看起来与其他选项不同。
你可以在jsfiddle中看到我不足的地方。这可能吗?
答案 0 :(得分:2)
通过CSS,在标签前面设置输入并使用正确的属性,如果输入是:选中或不选中,则可以应用不同的样式。
请参阅:https://www.w3.org/wiki/HTML/Elements/label&amp;更多https://www.w3.org/TR/WCAG20-TECHS/H44.html
label {/* button unchecked add your style*/
color:red
}
label:before {/* button checked add your style*/
content:'$';
font-size:1rem;
}
input:checked + label {
color:green;
}
[type=radio]{ /* hide it ? use any methode but display:none; */
position:absolute;
right:200%;
}
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[]" />
<label for="addon-2004-extra-tip-0[]">2</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[1]" />
<label for="addon-2004-extra-tip-0[1]">300</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[2]" />
<label for="addon-2004-extra-tip-0[2]">14</label>
<!-- same name to allow only one checked in this demo -->
其他结构,将收音机集成在按钮http://codepen.io/gc-nomade/pen/LketK(旧式玻璃按钮)的设计中
更改bg颜色的代码示例
.product-addon-extra-tip label {
float: left;
width: auto;
min-width: 60px;
margin: 3px;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
color: black;
font-size: 1.2rem;
text-align: center;
padding: 5px 0;
display: block;
line-height: 1.3rem;
}
.product-addon-extra-tip label input {}
.product-addon-extra-tip label:before {
content: '$';
}
label {
position: relative;
}
input {
position: absolute;
top: -15px;
z-index: -1;
box-shadow: 0 0 0 200px tomato;
}
input:checked {
box-shadow: 0 0 0 200px green;
}
<div class="product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="2"> 2 </label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
<label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="5"> 5 </label>
</p>
</div>