チェックボックスの背景色とスタイル

Question

ブラウザの設定が異なるため、チェックボックスをスタイルするのに良い方法はありません。すべてのチェックボックスをdivに折り返して背景色を変えることができるはずですが、境界線と手書き線はどうですか？

しかし、おそらく誰かがこのようにそれらのスタイルを任意のヒントを持っています。現時点では

は私がFirefoxでデフォルトを持っています。

Answer 1

あなたがFontawesomeを使用している場合（http://fontawesome.io/icons/）この要素を他のフォントと同様にスタイルすることができます。 それともhttp://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

Answer 2

使用マスクされたオーバーレイ

label { 
 
    display: block; 
 
    border: 4px solid #88a; 
 
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) inset; 
 
    border-radius: 10%; 
 
    width: 1em; 
 
    height: 1em; 
 
} 
 
input { 
 
    display: none; 
 
} 
 
input:checked + label { 
 
    background-color: rgba(0, 255, 0, .8); 
 
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .1) inset; 
 
}

<input type="checkbox" id="chk"> 
 
<label for="chk"></label>

Answer 3

Deddy、あなたはCSSコードinput + divで<input>後の要素のスタイルを設定することができます。チェックボックスがチェックされている場合は、スタイルinput:checked + divを試してください。入力要素を隠し、すべてを<label>で囲むと、div要素やその他の要素を簡単にスタイリングすることができます。その後、入力のIDにリンク属性にしてラベルを持っているものは何でも））

<label> 
    <input type="checkbox"> 
    <div></div> 
</label> 

Answer 4

私は最善の方法は、スパンでのラジオ/チェックボックスをラップすることであると信じて、DIV（;残りはあなたの想像力に依存します。

次に、visibility：hiddenを使用して入力を非表示にし、ラベルをスタイリングします。 （1つの入力に複数のラベルを付けることができます）。

前または後にチェックマークを付けることができます。

.styled-radio { 
 
    visibility:hidden; 
 
    position:absolute; 
 
    z-index:-2; 
 
} 
 

 
.styled-radio-label { 
 
    border:1px solid #ccc; 
 
    height:15px; 
 
    width:15px; 
 
    position:relative; 
 
} 
 

 

 
.styled-radio:checked + .styled-radio-label:after { 
 
    content:'\2713'; 
 
    position:absolute; 
 
    left:50%; 
 
    top:50%; 
 
    transform:translateY(-50%) translateX(-50%); 
 
} 
 

 
label { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
}

<span> 
 
    <input type='radio' id='html' value='html' class='styled-radio' name='lang'/> 
 
    <label for='html' class='styled-radio-label'></label> 
 
    <label for='html'>HTML</label> 
 
</span> 
 

 
<span> 
 
    <input type='radio' id='css' value='css' class='styled-radio' name='lang'/> 
 
    <label for='css' class='styled-radio-label'></label> 
 
    <label for='css'>CSS</label> 
 
</span> 
 

 
<span> 
 
    <input type='radio' id='JS' value='JS' class='styled-radio' name='lang'/> 
 
    <label for='JS' class='styled-radio-label'></label> 
 
    <label for='JS'>JS</label> 
 
</span>