回答:
何かが発生した場合に任意のブラウザで、私は驚かれることと思います。これは、ブラウザーがそれほどスタイルを設定できない傾向にある優れたフォーム要素の1つであり、通常、人々は何かをスタイル/コード化してチェックボックスのように振る舞うようにJavaScriptで置き換えようとします。
「ボーダー」の代わりに「アウトライン」を使用することをお勧めします。次に例を示しますoutline: 1px solid #1e5180。
!importantアウトラインを使用する場合、CSSに追加する必要がある場合があります。私はこれをFirefox 12.0でテストしていましたが、重要なことをしないと、チェックボックスをクリックしている間はアウトラインが消えてしまいます。
あなたは使うべきです
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;次に、デフォルトのチェックボックスの画像/スタイルを取り除き、スタイルを設定できます。とにかく国境はまだFirefoxにあります
ボックスシャドウを使用して境界線を偽造できます。
-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);これは、CSS3 LINKを使用したMartinのカスタムチェックボックスとラジオボタンに基づく純粋なCSS（画像なし）クロスブラウザソリューションです。http：//martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-revisited /
ここにjsFiddleがあります：http ://jsfiddle.net/DJRavine/od26wL6n/
私は以下のブラウザでこれをテストしました：
label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
display: inline-block;
vertical-align: middle;
}
label *,
label *
{
cursor: pointer;
}
input[type="radio"],
input[type="checkbox"]
{
opacity: 0;
position: absolute;
}
input[type="radio"] + span,
input[type="checkbox"] + span
{
font: normal 11px/14px Arial, Sans-serif;
color: #333;
}
label:hover span::before,
label:hover span::before
{
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}
label:hover span,
label:hover span
{
color: #000;
}
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
content: "";
width: 12px;
height: 12px;
margin: 0 4px 0 0;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
color: #666;
}
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
cursor: default;
-moz-opacity: .4;
-webkit-opacity: .4;
opacity: .4;
}
input[type="checkbox"] + span::before
{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
input[type="radio"]:checked + span::before
{
content: "\2022";
font-size: 30px;
margin-top: -1px;
}
input[type="checkbox"]:checked + span::before
{
content: "\2714";
font-size: 12px;
}
input[class="blue"] + span::before
{
border: solid 1px blue;
background: #B2DBFF;
background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
background: -o-radial-gradient(#B2DBFF, #dfdfdf);
background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
color: darkblue;
}
input[class="red"] + span::before
{
border: solid 1px red;
background: #FF9593;
background: -moz-radial-gradient(#FF9593, #dfdfdf);
background: -webkit-radial-gradient(#FF9593, #dfdfdf);
background: -ms-radial-gradient(#FF9593, #dfdfdf);
background: -o-radial-gradient(#FF9593, #dfdfdf);
background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
color: darkred;
} <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-02" class="blue" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-03" class="red" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>私は古くなっています。しかし、ちょっとした回避策は、チェックボックスをラベルタグの中に入れて、枠線でラベルをスタイルすることです：
<label class='hasborder'><input type='checkbox' /></label>次に、ラベルをスタイルします。
.hasborder { border:1px solid #F00; }label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }、その後、label > input[type=checkbox] { position: absolute; left: -999px; }これはあなた自身のチェックボックスとオリジナルのチェックボックスがまだ確認されます/未チェックあなたのカスタムスタイルをさせますが、ユーザがそれを見ることはありません。カスタムチェックボックスのみが表示されます。
:hoverし、 :checkedカスタムチェックボックスのスタイルの他の州に。
これは、チェックボックスのティッカーにFontAwesomeを使用する私のバージョンです。FontAwesomeはほとんどの人が使用していると思います。IE / Edgeでテストされていません。誰も気にしないと思います。
input[type=checkbox] {
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
outline: none;
content: none;
}
input[type=checkbox]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 15px;
color: transparent !important;
background: #fef2e0;
display: block;
width: 15px;
height: 15px;
border: 1px solid black;
margin-right: 7px;
}
input[type=checkbox]:checked:before {
color: black !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<input type="checkbox">以下のためのFirefox、クロムやサファリ、何も起こりません。
ためIE境界チェックボックス（不チェックボックスの一部として）の外側に適用され、チェックボックスに効果シェーディング「空想」がなくなっ（オールド・ファッションドチェックボックスとして表示されます）。
以下のためのオペラ境界線スタイルは、実際には、チェックボックス要素に境界線を適用しています。
Operaは他のブラウザよりもチェックボックス上の他のスタイリングも適切に処理します：色は目盛りの色として適用され、背景色はチェックボックス内の背景色として適用されます（IEは、チェックボックスが<div>背景の中にあるかのように背景を適用します） 。
最も簡単な解決策は、<div>他の人が提案したようにチェックボックスをラップすることです。
外観を完全に制御したい場合は、高度な画像/ JavaScriptアプローチを使用する必要があります。
視覚的な外観を大幅に変更したい場合、純粋なCSSではチェックボックス（およびその他の多くの入力要素）のスタイル設定は実際には不可能です。
あなたの最善の策は、実際に入力を画像に置き換え、それにJavaScriptの動作を適用してチェックボックス（またはそのほかの要素）を模倣するjqTransformのようなものを実装することです
いいえ、まだチェックボックス自体をスタイルすることはできませんが、チェックボックスをクリックする機能を維持しながら、錯覚をスタイルする方法を（ついに）見つけました。つまり、カーソルが完全に静止していない場合でも、テキストを選択したり、ドラッグアンドドロップをトリガーしたりせずに切り替えられます。
この例では、スパン「ボタン」とラベル内のテキストを使用していますが、チェックボックスを非表示にして、その後ろに何かを描画する方法についてのアイデアが得られます。
このソリューションは、おそらくラジオボタンにも適合します。
以下はIE9、FF30.0およびChrome 40.0.2214.91で動作し、基本的な例にすぎません。それでも、背景画像や疑似要素と組み合わせて使用できます。
http://jsfiddle.net/o0xo13yL/1/
label {
display: inline-block;
position: relative; /* needed for checkbox absolute positioning */
background-color: #eee;
padding: .5rem;
border: 1px solid #000;
border-radius: .375rem;
font-family: "Courier New";
font-size: 1rem;
line-height: 1rem;
}
label > input[type="checkbox"] {
display: block;
position: absolute; /* remove it from the flow */
width: 100%;
height: 100%;
margin: -.5rem; /* negative the padding of label to cover the "button" */
cursor: pointer;
opacity: 0; /* make it transparent */
z-index: 666; /* place it on top of everything else */
}
label > input[type="checkbox"] + span {
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid #000;
margin-right: .5rem;
}
label > input[type="checkbox"]:checked + span {
background-color: #666;
}
<label>
<input type="checkbox" />
<span> </span>Label text
</label>以下は簡単な方法です（擬似要素/クラスの前または後に使用する）：
input[type=checkbox] {
position: relative;
}
input[type=checkbox]:after {
position: absolute;
top: 0;
left: 0;
/* Above three lines allow the checkbox:after position at checkbox's position */
content: '';
width: 32px;
height: 32px;
z-index: 1; /* This allows the after overlap the checkbox */
/* Anything you want */
}<!DOCTYPE html>
<html>
<head>
<style>
.abc123
{
-webkit-appearance:none;
width: 14px;
height: 14px;
display: inline-block;
background: #FFFFFF;
border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
content: "";
display: inline-block;
position: relative;
top: -3px;
left: 4px;
width: 3px;
height: 5px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
}
input[type=checkbox]:checked {
background: #327DFF;
outline: none;
border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
outline: none;
}
input:hover {
border: 1px solid rgba(50,125,255,1);
}
</style>
</head>
<body>
<input class="abc123" type="checkbox"></input>
</body>
</html>それをdivに入れて、divに境界線を追加します