当输入在标签标签内时，将单选输入样式设置为按钮答案

【问题标题】：Style radio inputs as button when input is within label tag当输入在标签标签内时，将单选输入样式设置为按钮
【发布时间】：2016-06-06 03:55:57
【问题描述】：

我的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 中看到我的不足之处。这可能吗？

http://jsfiddle.net/2gdotu21/1/

【问题讨论】：

标签： css input radio-button label

【解决方案1】：

通过 CSS，在 label 前面设置输入并使用正确的属性，如果输入是 :checked，则可以应用不同的样式。

请参阅：https://www.w3.org/wiki/HTML/Elements/label 以及更多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（旧玻璃按钮）的设计中

更改背景颜色的代码示例

.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>

【讨论】：