ホームページ > 記事 > ウェブフロントエンド > フォーム要素 -- チェックボックス スタイル beautification_html/css_WEB-ITnose
フォーム要素 -- チェックボックス スタイル beautification_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:34:411218ブラウズ
1. 背景
Shitong 靴をデザインするとき、私たちは常に以下の Tuhao Jin の効果など、さまざまなハイエンドのレンダリングをデザインします。
画像では、「関連する利用規約を読んで同意しました」の前のチェックボックスに金色の枠線があり、チェックを入れると金色のチェックマークが付きます。次に、この効果を実現する方法について説明します。
2. 解決策1. 純粋な CSS 解決策
CSS3 セレクター (3) の記事で、セレクター [:checked] セレクターが紹介されました。
ラジオ ボタンとチェック ボタンには、チェックされた状態とチェックされていない状態の両方があります。これら 2 つのボタンのデフォルト スタイルの設定は、少し複雑です。この記事では、:checked セレクターを使用して、他の式でカスタム スタイルを実装します。
例: :checked セレクターを使用して、チェック ボックス スタイルをシミュレートします。
<meta charset="utf-8"><style type="text/css">form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto;}.wrapper { margin-bottom: 10px;}.box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle;}.box input { opacity: 0;}.box span { position: absolute; top: -10px; right: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange;}input[type="checkbox"] + span { opacity: 0;}input[type="checkbox"]:checked + span { opacity: 1;}</style><form action="#"> <div class="wrapper"> <div class="box"> <input type="checkbox" checked="checked" id="username" /><span>√</span> </div> <label for="username">我是选中状态</label> </div> <div class="wrapper"> <div class="box"> <input type="checkbox" id="userpwd" /><span>√</span> </div> <label for="userpwd">我是未选中状态</label> </div></form> 選択されたスタイルと選択されていないスタイルをシミュレートします。
スタイルなしの効果は次のとおりです。
スタイルを追加した後の最終的な効果は次のとおりです。
実際の開発ではこの方法を使ってみました。
この方法には問題があります。ボックスをクリックしても選択できません。テキストをクリックして選択する必要があります。
これは実際のアプリケーションでは絶対に許容できません。実際のアプリケーションでは 2 番目の方法をお勧めします。
2. js ソリューションと連携します
画像を使用します:
原則: label と input は相対的に配置される親要素として .custom-checkbox のレイヤーで覆われます。
入力は左上隅に絶対的に配置され、ラベルも左上隅に絶対的に配置され、入力正方形を覆います。ラベルのpadding-leftと背景画像を設定して、選択されていない状態をシミュレートします。選択すると、背景画像を選択状態の背景画像に変更する .right クラスを追加します。
js の click イベントを通じて、ラベルをクリックすると選択状態と非選択状態が切り替わります。
すごい
問題: クリック頻度が速すぎると、テキストがダブルクリックで選択されてしまい、ユーザー エクスペリエンスに影響します。
解決策:
<meta charset="utf-8"/><style type="text/css">.custom-checkbox{border:1px solid red;position:relative;height:30px;}.custom-checkbox input{position:absolute;}.custom-checkbox label{padding-left:20px;position:absolute;top:-1px;left:0;background:url(images/bg-unchecked.png) no-repeat top 4px left 3px;}.custom-checkbox label.right{background:url(images/bg-checked.png) no-repeat top 2px left 3px;}</style><body><div class="custom-checkbox"><input type="checkbox" id="test"/><label for="test">已阅读并同意相关服务条款</label></div><script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript"> $('.custom-checkbox label').click(function(){ if($(this).hasClass('right')){ $('.custom-checkbox label').removeClass("right"); }else{ $('.custom-checkbox label').addClass("right"); } });</script></body> 効果:
3. まとめラジオ ボタンのスタイルとチェック ボックスの原理は似ています。上記の方法はシミュレーション実装です。
記事「::before および ::after 疑似要素の使用法」で述べたように、10 年前には複数の背景画像を実装するために ::before および ::after を使用していましたが、現在では CSS3 で複数の背景が使用されています。標準; 私たち チェックボックス スタイルのモック実装により、それが標準になる可能性があります。これは、将来の世代への貢献であり、彼らの生活を容易にします。
もう一つ言いたいのは、フロントエンドテクノロジーの開発を推進する人々は、フロントエンドの同僚であるだけでなく、私たちの素敵なデザイナーでもあるということです。フロントエンドだけだと、既存のテクノロジーの実現可能性にとどまり、保守的な効果を生み出すことになりますが、デザイナーの「完璧主義」があれば、心を開いて挑戦し、テクノロジーをより高いレベルに押し上げることができます。
この記事の著者である Starof は、知識自体が変化しているため、著者も常に学習し成長しており、読者の誤解を避け、読みやすくするために記事の内容も随時更新されます。出典をたどり、転載の際は出典を明記してください: ご不明な点がございましたら、お気軽にご相談ください。一緒に進歩していきます。