CSS3 を fontawesome フォントと組み合わせてカスタムのラジオ ボタン チェック ボックス効果を実現

フロントエンドで作業しているときに、他の人が美しいチェック ボックスやラジオ ボタンを実装しているのをよく見かけますが、現在のプロジェクトのせいで、多くのラジオ ボックスやチェック ボックスが見苦しくなっているため、再び気まぐれに自分で実装することにしました。

1. まず、CSS コードを入力します:

1. このうち、z-index については、初期の位置決めの考慮事項に基づいて設定しました。使って自分で考えたいです

2. /*复选框效果*/
   input[type=checkbox] {
       width:16px;
       height:16px;
       z-index:10;
   }  /* 此处不解释，定义的是复选框宽高*/
   input[type=checkbox]::before {
       content:" ";
       display:inline-block;
       color:#000;
       width:16px;
       height:16px;
       background:#fff;
       border:1px #1ab394 solid;
       z-index:9;
       position: absolute;
   }/* 此处定义的是在没有选中的情况下的样式，利用::before设置空的content实现 */
   input[type=checkbox]:checked::before {
       content:"\f00c";
       color:#1ab394; 
       font: normal normal normal 14px/1 FontAwesome; 
       font-size: inherit; 
       text-rendering: auto; 
       -webkit-font-smoothing: antialiased; 
       -moz-osx-font-smoothing: grayscale;
   } /* 此处定义复选框选中时候的样式，此处 在before的content里使用\f00c的awesome字体来实现，这个字体值表示打勾*/
   /* 单选框效果 */
   input[type=radio] {
       width:16px;
       height:16px;
       z-index:10;
   }
   input[type=radio]::before {
       content:" ";
       display:inline-block;
       color:#000;
       width:16px;
       height:16px;
       border-radius:8px;
       background:#fff;
       border:1px #1ab394 solid;
       z-index:9;
       position: absolute;
   }
   input[type=radio]:checked::after {
       content:" ";
       display:inline-block;
       width:8px;
       height:8px;
       background:#1ab394;
       border-radius:50%;
       position:absolute;
       z-index:11;
       top:4px;
       left:4px;
   } /*以上的单选框和复选框类似，但此处选中不是采用更换字体，目前来说，没发现有适合的字体适用于里面的圆点，所以采用after设置一个长宽为8像素的块并设置圆角调整位置放到外层边框内容里实现*/

   2. 最終的な効果:

上の写真は、私のアプリケーションの実際のスクリーンショットです。

フロントエンドの作業をしているときに、他の人が美しいチェック ボックスやラジオ ボタンを実装しているのをよく見かけます。現在のプロジェクトの都合上、多くのラジオ ボックスやチェック ボックスは見た目が悪いので、私は気まぐれに計画しました。自分で実装するために。

1. まず、CSSコードを入力します:

その中で、z-indexについては、最初に位置決めを考慮して設定しました。使って自分で考えてみたいです

1. /*复选框效果*/
   input[type=checkbox] {
       width:16px;
       height:16px;
       z-index:10;
   }  /* 此处不解释，定义的是复选框宽高*/
   input[type=checkbox]::before {
       content:" ";
       display:inline-block;
       color:#000;
       width:16px;
       height:16px;
       background:#fff;
       border:1px #1ab394 solid;
       z-index:9;
       position: absolute;
   }/* 此处定义的是在没有选中的情况下的样式，利用::before设置空的content实现 */
   input[type=checkbox]:checked::before {
       content:"\f00c";
       color:#1ab394; 
       font: normal normal normal 14px/1 FontAwesome; 
       font-size: inherit; 
       text-rendering: auto; 
       -webkit-font-smoothing: antialiased; 
       -moz-osx-font-smoothing: grayscale;
   } /* 此处定义复选框选中时候的样式，此处 在before的content里使用\f00c的awesome字体来实现，这个字体值表示打勾*/
   /* 单选框效果 */
   input[type=radio] {
       width:16px;
       height:16px;
       z-index:10;
   }
   input[type=radio]::before {
       content:" ";
       display:inline-block;
       color:#000;
       width:16px;
       height:16px;
       border-radius:8px;
       background:#fff;
       border:1px #1ab394 solid;
       z-index:9;
       position: absolute;
   }
   input[type=radio]:checked::after {
       content:" ";
       display:inline-block;
       width:8px;
       height:8px;
       background:#1ab394;
       border-radius:50%;
       position:absolute;
       z-index:11;
       top:4px;
       left:4px;
   } /*以上的单选框和复选框类似，但此处选中不是采用更换字体，目前来说，没发现有适合的字体适用于里面的圆点，所以采用after设置一个长宽为8像素的块并设置圆角调整位置放到外层边框内容里实现*/

   2. 最終的な効果:

上の写真は、私のアプリケーションの実際のスクリーンショットです。

CSS3 と fontawesome フォントを組み合わせてカスタムのラジオ ボタン チェック ボックス効果を実現する関連記事の詳細については、PHP 中国語 Web サイトに注目してください。

前の記事: プログラムを書くときはどう考えるべきか?

-->