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

Question

我的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/

Answer 1

通过CSS，在标签前面设置输入并使用正确的属性，如果输入是否被选中，您可以应用不同的样式。

See: https://www.w3.org/wiki/HTML/Elements/label & further more 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>

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

Style radio inputs as button when input is within label tag

css

label

input

radio-button