美しいチェックボックススタイル(複数選択ボックス)はIE8/9/10、FFなどと完全に互換性があります。

美しいチェックボックススタイル(複数選択ボックス)はIE8/9/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 選

推薦する

Nginx を使用してクロスドメイン Vue 開発環境を処理する方法

1. 需要正しい Cookie 配信と SSO テストを確実に実行できるように、ローカル テスト ド...

MySQL でのデータベース間クエリの例

序文MySQL では、クロスデータベース クエリは主に 2 つの状況に分けられます。1 つは同じサー...

CentOS 7 ブートカーネルの切り替えとブートモードの切り替えの説明

Centos7 スイッチブートカーネル注: 必要に応じて、最初にyum update -yを実行して...

スクロール画像バーを実現するための CSS サンプルコード

一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS ...

Nginx は https ウェブサイト構成コード例を実装します

https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...

Centos7 システムでの python2 と python3 の共存

最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...

MySQLのロック機構に関する最も包括的な説明

目次序文グローバルロック完全なデータベース論理バックアップFTWRL と set global re...

MySQL データベースは XA 仕様をどのように実装しますか?

MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...

dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...

Vueの監視プロパティの詳細な説明

目次Vue モニターのプロパティリスナープロパティとは何ですか?リスニングプロパティと計算プロパティ...

jsはCanvasを使用して複数の画像を1つの実装コードにマージします

解決 関数 mergeImgs(リスト) { const imgDom = document.cre...

HTML 再利用テクニック

HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...

HTML でナンバープレート番号と州の略語を入力するためのサンプルコード

原理としては、まずボタン付きの div を記述し、次に画面のサイズに応じて自動的に適応してキーボード...

要素のフォーム要素の使用の概要

フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...

JS を使用して要素が配列であるかどうかを判断する例

検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...