CSSを使用してチェックボックスをスタイルする方法
次のようにチェックボックスをスタイルしようとしています。
<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />しかしスタイルは適用されません。チェックボックスにはまだデフォルトスタイルが表示されています。指定されたスタイルにするにはどうすればいいですか？
更新：以下の答えは、CSS3が広く利用可能になる前のものの状態を参照しています。最新のブラウザ（Internet Explorer 9以降を含む）では、JavaScriptを使用せずに、好みのスタイルでチェックボックスの置き換えを作成する方が簡単です。
ここにいくつかの役に立つリンクがあります：
- CSSだけでカスタムフォームのチェックボックスを作成する
- 簡単なCSSチェックボックスジェネレータ
- チェックボックスハックでできること
- CSS3でカスタムチェックボックスとラジオボタンを実装する
- CSSでチェックボックスをスタイルする方法
基本的な問題が変わっていないことは注目に値します。それでもスタイル（枠線など）をcheckbox要素に直接適用することはできず、それらのスタイルをHTMLチェックボックスの表示に適用させることはできません。ただし、変更点は、実際のチェックボックスを非表示にしてCSS以外の何も使用せずに独自のスタイル付き要素に置き換えることが可能になったことです。特に、CSSは現在広くサポートされている:checkedセレクタを持っているので、あなたはあなたの置き換えがボックスのチェックされた状態を正しく反映することができます。
高齢者の答え
これが チェックボックスのスタイル設定に関する便利な記事 です。基本的にその作家が見つけたことはそれがブラウザによって途方もなく変わるということであり、そして多くのブラウザがあなたがそれをどのようにスタイルに設定しても常にデフォルトチェックボックスを表示するということでした。だから、本当に簡単な方法はありません。
JavaScriptを使用してチェックボックスに画像を重ね、その画像をクリックすると実際のチェックボックスがチェックされるという回避策を想像するのは難しくありません。 JavaScriptを持たないユーザーにはデフォルトのチェックボックスが表示されます。
追加するために編集された：ここに あなたのためにこれをするNiceスクリプト ;実際のチェックボックス要素を非表示にし、それをスタイル付きスパンに置き換えて、クリックイベントをリダイレクトします。
CSSだけを使ってこれを行う方法があります。 （ab）代わりにlabel要素とスタイルを使うことができます。注意点は、これがIE 8以前のバージョンでは機能しないことです。
CSS：
.myCheckbox input {
// display: none;
// Better than display: none for accessibility reasons
position: relative;
z-index: -9999;
}
.myCheckbox span {
width: 20px;
height: 20px;
display: block;
background: url("link_to_image");
}
.myCheckbox input:checked + span {
background: url("link_to_another_image");
}
HTML：
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
:afterおよび:before疑似クラスに付属する新しい機能を使用することで、非常に優れたカスタムチェックボックス効果を実現できます。これの利点は次のとおりです。DOMにこれ以上追加する必要はなく、標準のチェックボックスだけを追加する必要があります。
これは互換性のあるブラウザでしか機能しないことに注意してください。これはブラウザによっては:afterと:beforeをinput要素に設定できないという事実に関係していると思います。残念ながら今のところWebキットブラウザだけがサポートされています。 FF + IEはチェックされていなくてもチェックボックスを機能させることができ、これは将来変更されることを期待しています（コードはベンダプレフィックスを使用しません）。
これはWebkitブラウザソリューションのみです（Chrome、Safari、Mobileブラウザ）
$(function() {
$('input').change(function() {
$('div').html(Math.random());
});
});/* Main Classes */
.myinput[type="checkbox"]:before {
position: relative;
display: block;
width: 11px;
height: 11px;
border: 1px solid #808080;
content: "";
background: #FFF;
}
.myinput[type="checkbox"]:after {
position: relative;
display: block;
left: 2px;
top: -11px;
width: 7px;
height: 7px;
border-width: 1px;
border-style: solid;
border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
content: "";
background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
background-repeat: no-repeat;
background-position: center;
}
.myinput[type="checkbox"]:checked:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}
.myinput[type="checkbox"]:disabled:after {
-webkit-filter: opacity(0.4);
}
.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}
.myinput[type="checkbox"]:not(:disabled):hover:after {
background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}
.myinput[type="checkbox"]:not(:disabled):hover:before {
border-color: #3D7591;
}
/* Large checkboxes */
.myinput.large {
height: 22px;
width: 22px;
}
.myinput.large[type="checkbox"]:before {
width: 20px;
height: 20px;
}
.myinput.large[type="checkbox"]:after {
top: -20px;
width: 16px;
height: 16px;
}
/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}
.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td>Normal:</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" disabled="disabled" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
<tr>
<td>Small:</td>
<td><input type="checkbox" class="myinput" /></td>
<td><input type="checkbox" checked="checked" class="myinput" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
</tr>
<tr>
<td>Large:</td>
<td><input type="checkbox" class="myinput large" /></td>
<td><input type="checkbox" checked="checked" class="myinput large" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
</tr>
<tr>
<td>Custom icon:</td>
<td><input type="checkbox" class="myinput large custom" /></td>
<td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
</tr>
</table>$(function() {
var f = function() {
$(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
};
$('input').change(f).trigger('change');
});body {
font-family: arial;
}
.flipswitch {
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor: pointer;
border: 1px solid #ddd;
}
.flipswitch:after {
position: absolute;
top: 5%;
display: block;
line-height: 32px;
width: 45%;
height: 90%;
background: #fff;
box-sizing: border-box;
text-align: center;
transition: all 0.3s ease-in 0s;
color: black;
border: #888 1px solid;
border-radius: 3px;
}
.flipswitch:after {
left: 2%;
content: "OFF";
}
.flipswitch:checked:after {
left: 53%;
content: "ON";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" />
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" />
<span></span>始める前に（2015年1月現在）
元の質問と答えは今5歳です。そのため、これは少し更新されています。
まず、スタイルチェックボックスに関しては、いくつかのアプローチがあります。基本的な原則は次のとおりです。
ブラウザによってスタイル設定されているデフォルトのチェックボックスコントロールを非表示にする必要があり、CSSを使用して意味のある方法でオーバーライドすることはできません。
コントロールを非表示にしても、チェック状態を検出して切り替えることができる必要があります。
チェックボックスのチェック状態は、新しい要素をスタイルすることによって反映される必要があります。
解決策（原則として）
上記のことはいくつかの方法で実現できます - そしてCSS3疑似要素を使うのが正しい方法であるとよく聞きます。実際には、実際に正しい方法や間違った方法はありません。それは、使用する状況に最も適した方法によって異なります。
チェックボックスを
label要素で囲みます。これは、非表示になっていても、ラベル内の任意の場所をクリックすると、チェック状態を切り替えることができることを意味します。チェックボックスを隠す
それに応じてスタイルを設定するチェックボックスに新しい要素afterを追加します。 CSSを使用して選択し、
:checked状態に応じてスタイル設定できるように、チェックボックスの後に表示する必要があります。 CSSは「後方」を選択できません。
解決策（コード内）
label input {
visibility: hidden;/* <-- hide the default checkbox, the rest is to hide and alllow tabbing, which display:none prevents */
display:block;
height:0;
width:0;
position:absolute;
overflow:hidden;
}
label span {/* <-- style the artificial checkbox */
height: 10px;
width: 10px;
border: 1px solid grey;
display: inline-block;
}
[type=checkbox]:checked + span {/* <-- style its checked state */
background: black;
}<label>
<input type='checkbox'>
<span></span>
Checkbox label text
</label>洗練（アイコンを使用）
しかしねえ！私はあなたが叫ぶのを聞きます。箱の中にちょっとした目盛りやクロスを見せたいのならどうでしょう？そして背景画像は使いたくありません。
さて、これがCSS3の擬似要素が効果を発揮できるところです。これらはcontentプロパティをサポートしています。これにより、 Unicodeアイコンを挿入できます どちらかの状態を表します。代わりに、font awesomeなどのサードパーティフォントアイコンソースを使用することもできます（ただし、関連するfont-familyもFontAwesomeに設定するようにしてください）。
label input {
display: none; /* hide the default checkbox */
}
/* style the artificial checkbox */
label span {
height: 10px;
width: 10px;
border: 1px solid grey;
display: inline-block;
position: relative;
}
/* style its checked state..with a ticked icon */
[type=checkbox]:checked + span:before {
content: '\2714';
position: absolute;
top: -5px;
left: 0;
}<label>
<input type='checkbox'>
<span></span>
Checkbox label text
</label>私は SW4's answer - のアドバイスに従って、チェックボックスを隠し、カスタムスパンで覆い隠し、このHTMLを提案します。
<label>
<input type="checkbox">
<span>send newsletter</span>
</label>
ラベルの折り返しにより、 "for-id"属性のリンクを必要とせずにテキストをクリックすることができます。しかしながら、
visibility: hiddenやdisplay: noneを使って隠してはいけません
クリックまたはタップすることで機能しますが、これはチェックボックスを使用するための不十分な方法です。まだもっと効果的に使っている人もいます tab フォーカスを移動する space 有効にしてそのメソッドで非表示にすると無効になります。フォームが長い場合は、tabindexまたはaccesskey属性を使用するための誰かの手首を省くことができます。また、システムのチェックボックスの動作を観察すると、ホバーにはかなりの影があります。適切なスタイルのチェックボックスはこの動作に従うべきです。
cobberboy's answer = ---お勧めします Font Awesome フォントはスケーラブルベクターなので、通常はビットマップより優れています。上記のHTMLを使って、私はこれらのCSSルールを提案したいと思います：
チェックボックスを隠す
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }私の例では、それを完全にカバーするのに十分な大きさのチェックボックススキンを使用しているので、負の
z-indexを使用します。left: -999pxはすべてのレイアウトで再利用できるわけではないのでお勧めしません。 Bushan wagh's answer それを隠してブラウザにtabindexを使うように説得力のある方法を提供するので、それは良い代替案です。とにかく、どちらもハックです。今日の正しい方法はappearance: noneです、 Joost's answer を見てください：input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; }スタイルチェックボックスのラベル
input[type="checkbox"] + span { font: 16pt sans-serif; color: #000; }チェックボックススキンを追加
input[type="checkbox"] + span:before { font: 16pt FontAwesome; content: '\00f096'; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }\00f096はFont Awesomeのsquare-oです。パディングはフォーカスされた点線のアウトラインを提供するように調整されます（下記参照）。チェックボックス付きのスキンを追加
input[type="checkbox"]:checked + span:before { content: '\00f046'; }\00f046はFont Awesomeのcheck-square-oです。これはsquare-oと同じ幅ではありません。これが上記の幅スタイルの理由です。フォーカスアウトラインを追加
input[type="checkbox"]:focus + span:before { outline: 1px dotted #aaa; }Safariはこの機能を提供していません（@Jason Sankeyのコメントを参照）。ブラウザを検出してSafariの場合はスキップするには
window.navigatorを使用する必要があります。無効チェックボックスのグレー色を設定
input[type="checkbox"]:disabled + span { color: #999; }無効になっているチェックボックスにホバーシャドウを設定する
input[type="checkbox"]:not(:disabled) + span:hover:before { text-shadow: 0 1px 2px #77F; }
デモフィドル
チェックボックスの上にマウスを置いて、 tab そして shift+tab 移動する space トグルへ。
label要素を使用して、ちょっとしたトリックでチェックボックスのスタイルを設定することができます。以下に例を示します。
.checkbox > input[type=checkbox] {
visibility: hidden;
}
.checkbox {
position: relative;
display: block;
width: 80px;
height: 26px;
margin: 0 auto;
background: #FFF;
border: 1px solid #2E2E2E;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.checkbox:after {
position: absolute;
display: inline;
right: 10px;
content: 'no';
color: #E53935;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-transform: capitalize;
z-index: 0;
}
.checkbox:before {
position: absolute;
display: inline;
left: 10px;
content: 'yes';
color: #43A047;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-transform: capitalize;
z-index: 0;
}
.checkbox label {
position: absolute;
display: block;
top: 3px;
left: 3px;
width: 34px;
height: 20px;
background: #2E2E2E;
cursor: pointer;
transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
z-index: 1;
}
.checkbox input[type=checkbox]:checked + label {
left: 43px;
}<div class="checkbox">
<input id="checkbox1" type="checkbox" value="1" />
<label for="checkbox1"></label>
</div>そして上記のコードでは_ fiddle _が必要です。 CSSの中には古いバージョンのブラウザでは動作しないものがありますが、いくつかの素晴らしいJavaScriptの例があるはずです。
実装が簡単でカスタマイズが簡単なソリューション
たくさんの検索とテストの結果、実装が簡単でカスタマイズが簡単なこのソリューションを手に入れました。 この解決策では ：
- 外部のライブラリやファイルは必要ありません
- ページにHTMLを追加する必要はありません。
- チェックボックスの名前とIDを変更する必要はありません。
流れるCSSをページの一番上に配置すると、すべてのチェックボックスのスタイルが次のように変わります。
input[type=checkbox] {
transform: scale(1.5);
}
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
input[type=checkbox]:after {
content: " ";
background-color: #fff;
display: inline-block;
margin-left: 10px;
padding-bottom: 5px;
color: #00BFF0;
width: 22px;
height: 25px;
visibility: visible;
border: 1px solid #00BFF0;
padding-left: 3px;
border-radius: 5px;
}
input[type=checkbox]:checked:after {
content: "\2714";
padding: -5px;
font-weight: bold;
}
余分なマークアップを追加することを避けることができます。これは、デスクトップ用のIEを除くすべての場所で機能します（ただし、Windows PhoneおよびMicrosoft Edge用のIEではCSS appearanceの設定によって機能します）。
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Styling checkbox */
width: 16px;
height: 16px;
background-color: red;
}
input[type="checkbox"]:checked {
background-color: green;
}<input type="checkbox" />CSSで色を変更するのは簡単で、高ピクセル密度のデバイスでは非常にうまく拡大できるので、私はアイコンフォント（FontAwesomeなど）を使用することを好みます。それで、上記と同様のテクニックを使った、もう一つの純粋なCSSの変種です。
（以下は静止画像ですので、結果を視覚化することができます。インタラクティブバージョンについては JSFiddle を参照してください）
他のソリューションと同様に、label要素を使用します。隣接するspanはチェックボックス文字を保持します。
span.bigcheck-target {
font-family: FontAwesome; /* use an icon font for the checkbox */
}
input[type='checkbox'].bigcheck {
position: relative;
left: -999em; /* hide the real checkbox */
}
input[type='checkbox'].bigcheck + span.bigcheck-target:after {
content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}
/* ==== optional - colors and padding to make it look Nice === */
body {
background-color: #2C3E50;
color: #D35400;
font-family: sans-serif;
font-weight: 500;
font-size: 4em; /* set this to whatever size you want */
}
span.bigcheck {
display: block;
padding: 0.5em;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="bigcheck">
<label class="bigcheck">
Cheese
<input type="checkbox" class="bigcheck" name="cheese" value="yes" />
<span class="bigcheck-target"></span>
</label>
</span>これが JSFiddle です。
これはかなり古い投稿ですが、最近私はこの問題に対する非常に興味深い解決策を見つけました。
appearance: none;を使用して、デフォルトのスタイルのチェックボックスをオフにしてから、describe here（例4） のように独自のスタイルで上書きすることができます。
input[type=checkbox] {
width: 23px;
height: 23px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-right: 10px;
background-color: #878787;
outline: 0;
border: 0;
display: inline-block;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type=checkbox]:focus {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type=checkbox]:checked {
background-color: green;
text-align: center;
line-height: 15px;
}<input type="checkbox">残念なことに、私の個人的なテストではブラウザサポートはappearanceオプションにとってはかなり悪いです。私はOperaとChromeが正しく動くようになっただけです。しかし、これは、より良いサポートが得られる場合や、Chrome/Operaのみを使用したい場合に、シンプルにする方法です。
私のグーグルから、これはチェックボックススタイルのための最も簡単な方法です。あなたのデザインに基づいて：afterと：checked：after cssを追加するだけです。
body{
background: #DDD;
}
span{
margin-left: 30px;
}
input[type=checkbox] {
cursor: pointer;
font-size: 17px;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
transform: scale(1.5);
}
input[type=checkbox]:after {
content: " ";
background-color: #fff;
display: inline-block;
color: #00BFF0;
width: 14px;
height: 19px;
visibility: visible;
border: 1px solid #FFF;
padding: 0 3px;
margin: 2px 0;
border-radius: 8px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}
input[type=checkbox]:checked:after {
content: "\2714";
display: unset;
font-weight: bold;
}<input type="checkbox"> <span>Select Text</span>これは単純なCSSソリューションで、jQueryやjavascriptはありません。
私はFontAwseomeアイコンを使っていますが、あなたはどんな画像も使うことができます
input[type=checkbox] {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
visibility: hidden;
font-size: 14px;
}
input[type=checkbox]:before {
content: @fa-var-square-o;
visibility: visible;
/*font-size: 12px;*/
}
input[type=checkbox]:checked:before {
content: @fa-var-check-square-o;
}
私の解決策
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
input[type="checkbox"]:after {
content: '';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>いいね！これらすべての回避策により、HTMLチェックボックスはスタイルを整えたいのであればちょっとした問題になるとの結論に至りました。
事前警告として、これはCSSの実装ではありません。他の誰かがそれを役に立つと思うかもしれない場合に備えて、私は私が思い付いた回避策を共有することをちょうど考えた。
私はHTML5のcanvas要素を使いました。
これの利点は、外部画像を使用する必要がなく、おそらく帯域幅をいくらか節約できることです。
欠点は、何らかの理由でブラウザで正しく表示できない場合、フォールバックがないことです。 2017年もこれが問題であるかどうかは議論の余地があります。
更新
私は古いコードをかなり醜いと思ったので、書き直すことにしました。
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offset){
this.ctx.fillStyle = color;
this.ctx.fillRect(offset, offset,
this.width - offset * 2, this.height - offset * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0);
this.draw_rect("#FFFFFF", 1);
if(this.is_checked())
this.draw_rect("#000000", 2);
},
is_checked: function(){
return !!this.state;
}
});
これが 実用的なデモです 。
新バージョンでは、プロトタイプと差分継承を使用してチェックボックスを作成するための効率的なシステムを作成しています。チェックボックスを作成するには：
var my_checkbox = Checkbox.create();
これは即座にチェックボックスをDOMに追加し、イベントをフックします。チェックボックスがチェックされているかどうかを問い合わせるには：
my_checkbox.is_checked(); // true if checked, else false
また注意すべき重要なことは、私はループを取り除いたということです。
アップデート2
前回のアップデートで触れていなかったことは、キャンバスを使用することには、見た目に適したチェックボックスを作成するよりも多くの利点があるということです。必要に応じて、 multi-state のチェックボックスを作成することもできます。
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
Object.prototype.extend = function(newobj){
var oldobj = Object.create(this);
for(prop in newobj)
oldobj[prop] = newobj[prop];
return Object.seal(oldobj);
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offsetx, offsety){
this.ctx.fillStyle = color;
this.ctx.fillRect(offsetx, offsety,
this.width - offsetx * 2, this.height - offsety * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0, 0);
this.draw_rect("#FFFFFF", 1, 1);
this.draw_state();
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
},
is_checked: function(){
return this.state == 1;
}
});
var Checkbox3 = Checkbox.extend({
ev_click: function(self){
return function(unused){
self.state = (self.state + 1) % 3;
self.draw();
}
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
if(this.is_partial())
this.draw_rect("#000000", 2, (this.height - 2) / 2);
},
is_partial: function(){
return this.state == 2;
}
});
最後のスニペットで使用したCheckboxをより汎用的になるように少し変更し、3つの状態を持つチェックボックスで "拡張"できるようにしました。これが demo です。ご覧のとおり、組み込みのチェックボックスよりも多くの機能があります。
JavaScriptとCSSのどちらを選ぶときに考慮すべきか。
古く、設計が不十分なコード
まず、キャンバスを設定します
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));
次に、キャンバスに自分自身を更新させる方法を考案します。
(function loop(){
// Draws a border
ctx.fillStyle = '#ccc';
ctx.fillRect(0,0,15,15);
ctx.fillStyle = '#fff';
ctx.fillRect(1,1,13,13);
// Fills in canvas if checked
if(checked){
ctx.fillStyle = '#000';
ctx.fillRect(2,2,11,11);
}
setTimeout(loop,1000/10); // refresh 10 times per second
})();
最後の部分はそれをインタラクティブにすることです。幸運にも、それはとても簡単です：
canvas.onclick = function(){
checked = !checked;
}
JavaScriptでの奇妙なイベント処理モデルが原因で、IEで問題が発生する可能性があるのはここです。
私はこれが誰かに役立つことを願っています、それは間違いなく私のニーズに合っています。
これを行う最も簡単な方法は、labelをスタイルしてcheckboxを非表示にすることです。
HTML
<input type="checkbox" id="first" />
<label for="first"> </label>
CSS
checkbox {
display: none;
}
checkbox + label {
/* Style for checkbox normal */
width: 16px;
height: 16px;
}
checkbox::checked + label,
label.checked {
/* Style for checkbox checked */
}
checkboxは非表示であってもアクセス可能であり、フォームが送信されたときにその値が送信されます。古いブラウザでは、IEの古いバージョンがlabelの::checkedを理解しているとは思わないため、JavaScriptを使用してチェックするようにcheckboxのクラスを変更する必要があるかもしれません。
プレーンCSS3でチェックボックスのスタイルを変更します。JSやHTMLの操作は必要ありません。
.form input[type="checkbox"]:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f096";
opacity: 1 !important;
margin-top: -25px;
appearance: none;
background: #fff;
}
.form input[type="checkbox"]:checked:before {
content: "\f046";
}
.form input[type="checkbox"] {
font-size: 22px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form class="form">
<input type="checkbox" />
</form>JavaScriptやJqueryは不要 。
チェックボックスのスタイルを簡単に変更します。
HTML
<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>
CSS
input[type="checkbox"] {
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
background: url(http://imgh.us/uncheck.png);
width: 49px;
height: 49px;
display: inline-block;
vertical-align: middle;
}
input[type="checkbox"]:checked + label span {
background: url(http://imgh.us/check_2.png);
width: 49px;
height: 49px;
vertical-align: middle;
}
これはJsFiddleリンクです： https://jsfiddle.net/05y2bge3/ /
シンプルで軽量なテンプレート
input[type=checkbox] {
cursor: pointer;
}
input[type=checkbox]:checked:before {
content: "\2713";
background: #fffed5;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 20px;
text-align: center;
line-height: 8px;
display: inline-block;
width: 13px;
height: 15px;
color: #00904f;
border: 1px solid #cdcdcd;
border-radius: 4px;
margin: -3px -3px;
text-indent: 1px;
}
input[type=checkbox]:before {
content: "\202A";
background: #ffffff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 20px;
text-align: center;
line-height: 8px;
display: inline-block;
width: 13px;
height: 15px;
color: #00904f;
border: 1px solid #cdcdcd;
border-radius: 4px;
margin: -3px -3px;
text-indent: 1px;
}<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>これは最も簡単な方法で、このスタイルをどのチェックボックスに付けるかを選択できます。
CSS：
.check-box input {
display: none;
}
.check-box span:before {
content: ' ';
width: 20px;
height: 20px;
display: inline-block;
background: url("unchecked.png");
}
.check-box input:checked + span:before {
background: url("checked.png");
}
HTML：
<label class="check-box">
<input type="checkbox">
<span>Check box Text</span>
</label>
これはCSS/HTMLのみのバージョンで、JqueryやJavascriptはまったく必要ありません。シンプルでクリーンなHTML、そして本当にシンプルで短いCSSです。
これがJSFiddleです
これがHTMLです
<div id="myContainer">
<input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
<label for="myCheckbox_01_item" class="box"></label>
<label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>
これがCSSです
#myContainer {
outline: black dashed 1px;
width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #FFF ;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #F00;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
font: normal 12px arial;
display: inline-block;
line-height: 27px;
vertical-align: top;
margin: 5px 0px;
}
これは個々のラジオやチェックボックス、チェックボックスのグループ、ラジオボタンのグループを持つことができるようにすることができます。
このhtml/cssでは、ラベル上のクリックをキャプチャすることもできるため、ラベルをクリックしただけでもチェックボックスはオンになり、オフになります。
このタイプのチェックボックス/ラジオボタンは、どんな形式でも問題なく動作します。 php、aspx、javafaces、coldfusionもテストされています。
警告 ：これを書いている時点では以下のことが当てはまりましたが、その間に物事が進行しています。
私の知る限りの最新ブラウザは、ネイティブのOSコントロールを使ってチェックボックスを表示するので、それらをスタイルする方法はありません。
いいえ、それでもチェックボックス自体にスタイルを設定することはできませんが、チェックボックスをクリックする機能を維持しながら）イリュージョンのスタイルを設定する方法を（最後に）考え出しました。テキストを選択したり、ドラッグアンドドロップを実行したりする必要はありません。
この解決策はおそらくラジオボタンにも当てはまります。
以下は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>
EdgeやFirefoxのようなブラウザはチェックボックス入力タグで：before：afterをサポートしていないので、ここでは純粋にhtmlとcssを使った代替手段です。もちろん、あなたはあなたの要求に従ってcssを編集するべきです。
チェックボックスのHTMLを次のようにします。
<div class='custom-checkbox'>
<input type='checkbox' />
<label>
<span></span>
Checkbox label
</label>
</div>
カラーラベルを変更するには、このスタイルをチェックボックスに適用します
<style>
.custom-checkbox {
position: relative;
}
.custom-checkbox input{
position: absolute;
left: 0;
top: 0;
height:15px;
width: 50px; /* Expand the checkbox so that it covers */
z-index : 1; /* the label and span, increase z-index to bring it over */
opacity: 0; /* the label and set opacity to 0 to hide it. */
}
.custom-checkbox input+label {
position: relative;
left: 0;
top: 0;
padding-left: 25px;
color: black;
}
.custom-checkbox input+label span {
position: absolute; /* a small box to display as checkbox */
left: 0;
top: 0;
height: 15px;
width: 15px;
border-radius: 2px;
border: 1px solid black;
background-color: white;
}
.custom-checkbox input:checked+label { /* change label color when checked */
color: orange;
}
.custom-checkbox input:checked+label span{ /* change span box color when checked */
background-color: orange;
border: 1px solid orange;
}
</style>
CSSだけを使ってグレースケールでチェックボックスの色を変えることができるようです。
以下はチェックボックスを黒からグレーに変換します（これは私が望んでいたことです）。
input[type="checkbox"] {
opacity: .5;
}
input[type=checkbox].css-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:20px;
height:15px;
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:15px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
.css-label{
background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}
最新のブラウザでappearance: noneを使用するだけで、デフォルトのスタイル設定がなく、すべてのスタイルが適切に適用されます。
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 2em;
height: 2em;
border: 1px solid gray;
outline: none;
vertical-align: middle;
}
input[type=checkbox]:checked {
background-color: blue;
}
純粋なCSSでは、：beforeや：after、no transformとは何の関係もないので、デフォルトの外観をオフにしてから、次の例のようにインラインの背景画像でスタイルを設定できます。これはChrome、Firefox、Safari、そしてEdge（Chromium Edge）で動作します。
INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}
INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width: 17px;
height: 17px;
cursor:pointer;
position: relative;
top: 5px;
}
INPUT[type=checkbox]:checked
{
background-color:#409fd6;
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}<form>
<label><input type="checkbox"> I Agree To Terms & Conditions</label>
</form>