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

CSSの外観プロパティを持つカスタムチェックボックス

外観プロパティを使用して、ユーザーのオペレーティングシステムのプラットフォームネイティブスタイルに従って要素のスタイルを設定します。

構文

CSSの外観プロパティの構文は次のとおりです-

Selector {
   appearance: /*value*/;
   -webkit-appearance: /*value*/; /*for Safari and Chrome */
   -moz-appearance: /*value*/; /*for Firefox */
}

例

次の例は、CSSの外観プロパティを示しています。

<!DOCTYPE html>
<html>
   <style>
      input[type=checkbox] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 12px;
         background-color: cyan;
         box-shadow: inset 0 3px 3px 5px lightgreen;
         border-radius:50%;
      }
      input[type=checkbox]:checked {
         background-color: coral;
         border: 6px solid cornflowerblue;
         box-shadow: 0 1px 2px lightorange;
      }
      input[type=checkbox]:checked:after {
         content:"Checked";
      }
   </style>
<body>
   <input type="checkbox"> Custom Checkbox Example
</body>
</html>

これにより、次の出力が得られます

CSSの外観プロパティを持つカスタムチェックボックス

CSSの外観プロパティを持つカスタムチェックボックス

例

<!DOCTYPE html>
<html>
   <style>
      input[type=checkbox] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 10px;
         background-color: cyan;
         border-radius:5%;
      }
      input[type=checkbox]:checked {
         background-color: magenta;
      }
      input[type=checkbox]:checked:before {
         content:"\2713";
         color: white;
         padding: initial;
         font-weight: bold;
      }
   </style>
<body>
   <input type="checkbox"> Another Custom Checkbox Example
</body>
</html>

これにより、次の出力が得られます

CSSの外観プロパティを持つカスタムチェックボックス

CSSの外観プロパティを持つカスタムチェックボックス


  1. CSSでカスタムスクロールバーを作成するにはどうすればよいですか？

    CSSを使用してカスタムスクロールバーを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana

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

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