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

推薦する

JSはGMTとUTCのタイムゾーンを完全に理解しています

目次序文1. GMT GMTとはGMTの歴史2. UTC UTCとはUTC は次の 2 つの部分で構...

Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...

JavaScript タイマーの詳細

目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...

Linux sftp コマンドの使用法の概要

sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...

CocosCreator Typescriptでテトリスゲームを作る

目次1. はじめに2. 解決すべきいくつかの重要な問題3.最後に書く1. はじめに最近、Cocos ...

EDMをHTMLで記述する際の注意点まとめ(メール送信時の一般的な注意点)

フォーマットエンコーディング1. ページの幅は600~800px、長さは1024px以内に設定してく...

MySql 組み込み関数の自習知識ポイントまとめ

文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...

一般的なイベントを処理するための JavaScript の使用に関する詳細な説明

目次1. フォームイベント2. マウスイベント3. キーボードイベント4. 共通イベントメソッド(ウ...

Vueモバイル端末は左スライド編集と削除の全プロセスを実現します

序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...

Linux プロセスの CPU 使用率が 700% に達し、終了できない場合の解決策

目次1. 問題の発見2. プロセスの詳細情報を表示する3. 解決策4. 大法を再開する1. 問題の発...

Linuxの貼り付けコマンドの使い方

01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...

Nginx で何ができるかの包括的な分析

序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...

CentOS8でyumソースを変更した後にウェアハウスキャッシュの同期に失敗する問題の詳細な説明

問題の原因: 最初は CentOS 8 のデフォルトの yum ソースを正常に使用できますが、次のコ...