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=radio] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 10px;
         background-color: orange;
         border-radius:50%;
      }
      input[type=radio]:checked {
         background-color: magenta;
      }
      input[type=radio]:hover {
         cursor: pointer;
      }
   </style>
   <body>
      Custom radio button example<br/>
         <form>
            <label for="r1">r1</label>
            <input type="radio" id="r1" name="btn" value="v1">
            <input type="radio" id="r2" name="btn" value="v2">
            <label for="r2">r2</label>
      </form>
   </body>
</html>

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

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

例

<!DOCTYPE html>
<html>
   <style>
      label {
         display: flex;
         align-items: top;
      }
      label input {
         margin: 0px 10px 0px 10px;
      }
      input[type=checkbox] {
         appearance: none;
         -moz-appearance: none;
         -webkit-appearance: none;
         border: 3px ridge currentcolor;
         border-radius: 60px;
         box-sizing: content-box;
         color: lightblue;
         height: 60px;
         padding: 2px 2px 2px 2px;
         transition-duration: 280ms;
         transition-property: border-color, color;
         transition-timing-function: ease;
         width: 20px;
      }
      input[type=checkbox]:checked {
         color: lightgreen;
      }
      input[type=checkbox]::after {
         background-color: currentcolor;
         border-radius: 10px 10px 10px 10px;
         content: "";
         display: block;
         height: 20px;
         transform: translateY(0px);
         transition: transform 300ms ease-in;
         width: 20px ;
      }
      input[type=checkbox]:checked::after {
         transform: translateY(40px);
      }
   </style>
   <body>
      <p>
         Custom radio button example
         <label for="crb">
            Blue
            <input id="crb" type="checkbox"/>
            <br/><br/><br/>Green
         </label>
      </p>
   </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の外観プロパティを示しています。