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，在标签前面设置输入并使用正确的属性，如果输入是：选中或不选中，则可以应用不同的样式。

请参阅：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>

当输入在标签标签内时，样式收音机输入为按钮

1 个答案: