ピュアCSSのカスタムラジオボタン（全幅）

Question

私はこの使用してCSSのみ（背景画像）のようなラジオボタンのスタイルを設定したい

をオフに私はチェックボックスからラジオドットやチックを置き換える方法を知っている - それについてインターネット上のチュートリアルがたくさんあります - しかし、私はこのようなラベルのテキストの背後に座って矩形を作る方法を見つけることができませんでした（100入力のサイズの％は&のまわりに余分な空白を置きません）。

古いブラウザ（IE8）との互換性を考慮する必要があります。

この

は（私は、ブートストラップを使用しています）私のhtmlです：私はあなたがそれをボタンと同様のスタイルを設定することができると思い

<div class="col-xs-6 col-sm-6"> 
    <input type="radio" id="gender_woman" name="gender" value="madame" checked> 
    <label for="connexion_madame">MADAME</label> 
</div> 
<div class="col-xs-6 col-sm-6"> 
    <input type="radio" id="gender_man" name="gender" value="monsieur"> 
    <label for="connexion_monsieur">MONSIEUR</label> 
</div> 

Answer 1

スタイリングブートストラップをオーバーライドし、そのようbeacuse重要な（私は、ブートストラップを使用していない）

HTML

<label class="radio"> 
    <input type="radio" name="gender" value="MADAME"> 
    <span>MADAME</span> 
</label> 
<label class="radio"> 
    <input type="radio" name="gender" value="MONSIEUR"> 
    <span>MONSIEUR</span> 
</label> 

CSS

label.radio { 
    cursor: pointer; 
} 
label.radio input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    visibility: hidden; 
    pointer-events: none; 
} 
label.radio span { 
    padding: 7px 14px; 
    border: 2px solid #EEE; 
    display: inline-block; 
    color: #009BA2; 
    border-radius: 3px; 
    text-transform: uppercase; 
} 
label.radio input:checked + span { 
    border-color: #009BA2; 
} 

リンクJSFiddle：https://jsfiddle.net/edbmwz0c/

希望はあなたが、少なくとも試みあなた自身のためにこれをコーディングすることが期待されます

Answer 2

ので、私は、これはトリックを行うべきだと思う

.checkbox{ 
    //other stuff 
    background-color: #ffffff !important; 

} 

それは使用することが重要です！あなたは