「CSS」チェック・ボックスと選択の構成
5843 ワード
checkbox,selectどうしてCSSは役に立たないの...?
formフォームを作成するときに、ブラウザのデフォルトスタイルがデフォルトで適用されます.この場合、<input type="checkbox">、<input type="radio">、<select>안에 <option>の3種類ともCSSの要求を満たすことができず、独自のデザインで装飾することができない.では、この3つのことは飾らないのでしょうか...?
もちろん違います.今回のリリースでは、これらの要素をどのように装飾するかについて説明します.
四角箱は四角を飾ってこそ味がある。
この方法さえ分かれば、画像の左の基本スタイルを右のように着飾ることができます!次のコードはinput:checked+labl::beforeを理解して、どのように装飾するかを理解することができます.
この方法さえ分かれば、画像の左の基本スタイルを右のように着飾ることができます!次のコードは
input:checked+labl::beforeを理解して、どのように装飾するかを理解することができます.:checkedは仮想クラスであり、<input type="checkbox">と<input type="radio">がチェックされているかどうかを知ることができます. 선택자1 + 선택자2は、選択者1を修飾する兄弟要素選択者2の隣接する兄弟結合者である.::beforeは、要素のコンテンツの前にある要素内の仮想要素です./* 요소를 숨기는 class.*/
.txt-hide {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
overflow: hidden;
}
/*체크를 안 했을 때*/
label::before{
display: inline-block;
content:"";
width: 체크박스 크기;
height: 체크박스 크기;
margin-right:label과의 여백;
background-image:url("체크 안된 상태의 이미지.png");
}
/*체크했을 때*/
input:checked+labl::before{
background-image:url("체크 상태의 이미지.png");
}
/*체크박스 선택한 상태일 때 테두리 생김*/
input:focus+.labl::before{
outline:2px solid #000;
}<input type="checkbox" id="inpHold" class="txt-hide">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>select Dropboxは作ってこそ美味しい
<select>はcssで飾ることができますが、中の<option>はブラウザの基本的なスタイルに従います.選択ボックスと同じ構造を他の要素で作成したり装飾したりすることができます.
Reference
この問題について(「CSS」チェック・ボックスと選択の構成), 我々は、より多くの情報をここで見つけました https://velog.io/@chumil7432/CSS-checkbox와-select-꾸미기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol