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

推薦する

Linux dirnameコマンドの具体的な使い方

01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...

iframe の src を about:blank に設定した後の詳細

iframe の src を 'about:blank' に設定した後、"...

2 つの Linux サーバー間の自動ファイル同期

サーバーB(172.17.166.11)の電源がオンまたは再起動されると、サーバーA(172.17....

CentOS 7.x に ZSH ターミナルをインストールする方法

1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...

React イベントバインディングの詳細

目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...

Docker-compose ネットワークの詳細な例

今日は Docker でのネットワーク設定を試し、後で忘れないようにプロセスを記録しました。 (シス...

CentOS の起動時に RabbitMq ソフトウェアを自動的に起動する方法

1. /etc/init.dディレクトリに新しいrabbitmqを作成します。 [root@loca...

HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...

Jsモジュールパッケージのエクスポートの使用法と違いにはインポートが必要

目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...

vue+element で動的スキニングを実装するためのサンプルコード

プロジェクトのテーマがすべての人の美的感覚を満足できないこともあります。このとき、スキン変更機能は非...

MySQLトリガーはPHPプロジェクトで情報のバックアップ、復元、クリアに使用されます。

例: PHP バックグラウンド コードを通じて、従業員情報を削除したり、削除した従業員情報を復元した...

MySQL ジョイントインデックスの使用ルール

結合指数は複合指数とも呼ばれます。複合インデックスの場合: MySQL はインデックス内のフィールド...

Linux システムファイル共有 samba 設定チュートリアル

目次sambaをアンインストールしてインストールする新しい共有パスを作成し、権限を設定するSamba...