10、FFなどと完全に互換性があります。

恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い間検索する必要がありました。さらに厄介なのは、Baidu が長い間、実行可能な解決策を見つけられなかったことです。

その後、csscheckbox.com で多くのスタイルを見つけましたが、互換性をテストしたところ、IE では失敗しました。これにより、かなりの時間が遅れました。

ショートカットをいろいろ試してみましたがダメだったので、JQuery UI に戻りました。言うまでもなく、互換性は非常に良く、好きなスタイルで描画できます。

あなたの便宜と将来の使用のために、チェックボックススタイルの記録をここに示します。

デフォルト、ホバー、アクティブの 3 つの状態があります。テスト済みで、IE8/9/10、FF などと完全に互換性があります。

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="utf-8" />
<link rel="スタイルシート" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<スクリプト>
$(関数() {
$("#check").ボタン();
$("#format").buttonset();
});
</スクリプト>
<スタイル>
.ui-ボタンテキストのみ .ui-ボタンテキスト {
パディング: 8px;
}
.ui-state-default、
.ui-widget-content .ui-state-default、
.ui-ウィジェットヘッダー .ui-state-default {
背景: url(images/safari-checkbox.png) 0 0 繰り返しなし; 境界線:なし;
}
.ui-state-hover、
.ui-widget-content .ui-state-hover、
.ui-widget-header .ui-state-hover、
.ui-state-focus、
.ui-widget-content .ui-state-focus、
.ui-ウィジェットヘッダー .ui-state-focus {
背景: url(images/safari-checkbox.png) -16px 0 繰り返しなし; 境界線:なし;
}
.ui-state-active、
.ui-widget-content .ui-state-active、
.ui-ウィジェットヘッダー .ui-state-active {
背景: url(images/safari-checkbox.png) 0 -16px 繰り返しなし; 境界線:なし;
}
</スタイル>
</head>
<本文>
<input type="checkbox" id="check" /><label for="check"></label>
</本文>
</html>

<<: Linuxカーネルスケジューラソースコード初期化の分析

>>: 初心者のための HTML コーディングガイドライン 30 選