恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、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. GMT GMTとはGMTの歴史2. UTC UTCとはUTC は次の 2 つの部分で構...
私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...
目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...
次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...
MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...
sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...
目次1. はじめに2. 解決すべきいくつかの重要な問題3.最後に書く1. はじめに最近、Cocos ...
フォーマットエンコーディング1. ページの幅は600~800px、長さは1024px以内に設定してく...
文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...
目次1. フォームイベント2. マウスイベント3. キーボードイベント4. 共通イベントメソッド(ウ...
序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...
目次1. 問題の発見2. プロセスの詳細情報を表示する3. 解決策4. 大法を再開する1. 問題の発...
01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...
序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...
問題の原因: 最初は CentOS 8 のデフォルトの yum ソースを正常に使用できますが、次のコ...