使用 CSS appearance 属性的自定义复选框

cssweb developmentfront end technology更新于 2024/5/16 2:52:17

我们使用 appearance 属性根据用户操作系统的平台原生样式来设置元素的样式。

语法

CSS appearance 属性的语法如下 −

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>

这将给出以下输出