恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、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 選
1. 需要正しい Cookie 配信と SSO テストを確実に実行できるように、ローカル テスト ド...
序文MySQL では、クロスデータベース クエリは主に 2 つの状況に分けられます。1 つは同じサー...
Centos7 スイッチブートカーネル注: 必要に応じて、最初にyum update -yを実行して...
一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS ...
https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...
最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...
目次序文グローバルロック完全なデータベース論理バックアップFTWRL と set global re...
MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...
1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...
目次Vue モニターのプロパティリスナープロパティとは何ですか?リスニングプロパティと計算プロパティ...
解決 関数 mergeImgs(リスト) { const imgDom = document.cre...
HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...
原理としては、まずボタン付きの div を記述し、次に画面のサイズに応じて自動的に適応してキーボード...
フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...
検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...