具有 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>

这给出了以下输出

示例

<!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>

这给出了以下输出

基础教程