CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

純粋なCSSを使用してチェックボックスとラジオボタンをカスタマイズする方法を学ぶ

フォームを作成するときに、チェックボックスとラジオボタンの入力を使用して、ユーザー設定、条件への同意、または人口統計データを収集する必要がある場合があります。チェックボックスやラジオボタンなどのHTML入力要素は、デフォルトの外観になっています。外観を変更したい場合は、CSSを使用して外観を好みに合わせてカスタマイズできます。この記事では、フォームまたはWebページのチェックボックスとラジオ入力をカスタマイズする方法のサンプルを示します。

HTMLセットアップ

スタイルを設定するHTMLスケルトンコードは、チェックボックスとラジオボタンの両方で基本的に同じです。

oneのメインコンテナ チェックボックス/ラジオボタンがHTMLラベル要素になります。そのラベルの中に、適切なタイプの入力要素と、要素が選択されているかどうかを示すスパン要素があります。 

<html>
<head>
 
  <style>
	/* No CSS Here Yet. */
  </style>>
 
</head>
 <body>
   <h2>Radio Button and Checkbox CSS Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked="checked">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <script href="script.js"></script>
 </body>
</html>

上記のマークアップの最初の入力セットはラジオボタンです。ユーザーが1つだけを選択する必要がある場合は、フォームにラジオボタンを使用します 複数の選択肢からの選択。

2番目のセットはチェックボックスです。チェックボックスは、ユーザーが選択肢の中から必要に応じて複数の選択肢を選択できる場合に使用されます。また、ユーザーが何かに同意/不同意またははい/いいえのいずれかを行う必要がある場合にも使用されます。

これらのHTML要素にはデフォルトの外観があります。それらをカスタマイズしたい場合は、確かにそれを行うことができます！ CSSを使用してスタイルを調整できます：

CSSセットアップ

ラジオボタンまたはチェックボックスのスタイルを変更するには、次の手順で問題を解決する必要があります。

  1. ラベルをカスタマイズする
    1. プロパティを表示
    2. 相対的な位置
    3. カーソルポインタ
    4. 見た目に美しいものにするためのマージンとパディング
  2. デフォルトのチェックボックスを非表示にする
    1. プロパティを表示
  3. カスタムチェックボックスとなるコンテナを作成します
    1. 高さ
    2. 幅
    3. 背景
    4. 位置–絶対
    5. 左上の値を設定
  4. ホバー時に発生する特別なものを追加します（つまり、チェックボックスの背景色を変更します）
  5. ボックスまたはボタンがオンになっているときに背景色を変更する
  6. チェックされていない場合はチェックマークまたは丸を非表示にします
  7. チェックしたときにチェックマークまたは丸を表示する
  8. チェックマークのスタイルを設定する
  9. 円のスタイルを設定する

以下のコードを見る前に、スケルトンHTMLと上記の問題を解決するための手順の内訳を考慮して、自分でコードを理解することをお勧めします。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

ソリューションコード：

<html>
<head>
 
 <style>
  /* Customize the label (the input) */
label {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
/* Hide the browser's default checkbox */
label input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}
 
/* Create a custom checkbox container */
.checkmark, .link {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
}
 
/* Add border radius for the radio button */
.circle {
 border-radius: 50%;
}
 
/* On mouse-over, add a background color */
label:hover input ~ .checkmark {
 background-color: #ccc;
}
 
/* When the checkbox is checked, add a blue background */
label input:checked ~ .checkmark {
 background-color: #2196F3;
}
 
/* Create the checkmark/circle (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
 
/* Show the checkmark when checked */
label input:checked ~ .checkmark:after {
 display: block;
}
 
/* Style the checkmark */
label .checkmark:after {
 left: 10px;
 top: 3px;
 width: 5px;
 height: 15px;
 border: solid white;
 border-width: 0 3px 3px 0;
 /* always check to see if you need to use the css browser prefixes */
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
 
/* Style the radio button circle */
label .circle:after {
 width: 15px;
 height: 15px;
 /* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */
 border: none;
 background: white;
 border-radius: 50%;
 left: 20%;
 top: 20%;
}
 
 </style>
 
</head>
 <body>
   <h2>CSS Radio Button and Checkbox Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked>
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example" checked>
     <span class="checkmark"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
   <label class="input">Six
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
 </body>
</html>

そこにあります。 CSSのラジオボタンとチェックボックスの例。これは最初は少し頭を悩ませるかもしれませんが、あなたはそれを理解するでしょう！このCSSの演習を終えることができれば、より難しいトピックに進む準備ができています。




  1. CSSとJavaScriptを使用して見積もりの​​スライドショーを作成するにはどうすればよいですか？

    CSSとJavaScriptを使用して見積もりスライドショーを作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Gene

  2. CSSの外観プロパティを持つカスタムラジオボタン

    外観プロパティを使用して、ユーザーのオペレーティングシステムのプラットフォームネイティブスタイルに従って要素のスタイルを設定します。 構文 CSSの外観プロパティの構文は次のとおりです- Selector {    appearance: /*value*/;    -webkit-appearance: /*value*/; /*for Safari and Chrome */    -moz-appearance: /*value*/; /*for Firefox */ } 例 次の例は、CSSの外観プロパティを示しています。