恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、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 選
01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...
iframe の src を 'about:blank' に設定した後、"...
サーバーB(172.17.166.11)の電源がオンまたは再起動されると、サーバーA(172.17....
1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...
目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...
現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...
今日は Docker でのネットワーク設定を試し、後で忘れないようにプロセスを記録しました。 (シス...
1. /etc/init.dディレクトリに新しいrabbitmqを作成します。 [root@loca...
検証環境: [root@~~/]# rpm -qa | grep mysql mysql-5.6.2...
1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...
目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...
プロジェクトのテーマがすべての人の美的感覚を満足できないこともあります。このとき、スキン変更機能は非...
例: PHP バックグラウンド コードを通じて、従業員情報を削除したり、削除した従業員情報を復元した...
結合指数は複合指数とも呼ばれます。複合インデックスの場合: MySQL はインデックス内のフィールド...
目次sambaをアンインストールしてインストールする新しい共有パスを作成し、権限を設定するSamba...