Стиль входов радио в качестве кнопки, если ввод в маркирующих

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

Via CSS, вход расположен в передней части этикетки и правильный атрибут используется, вы можете применить другой стиль, если вход: проверка или нет.

См: 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>