#discussStyling HTML复选框非常简单
最初发布在我的博客上
旧故事
回到过去，HTML组件就像 复选框 按照我们想要的方式设计风格非常棘手。这些组件通常是从整体页面设计中脱颖而出的，这对用户体验来说并不是那么好。
更不用说每个浏览器都有（并且仍然拥有）自己的控件外观，从而导致各种浏览器的外观和感觉差异。
为了克服这些情况，开发人员过去常常进行大量的黑客操作，例如隐藏输入，为复选标记创建图像和图标，以及添加一堆JavaScript代码来处理检查/取消检查。如果你问我，这不是那么漂亮，看起来很多东西看起来很简单。
新故事
上述时代早已过去，我们比以往任何时候都更接近于在所有浏览器中看起来和感觉相同的方式设置复选框的通用方式，尤其是微软正在构建基于铬的浏览器的消息。你可以在这里读到它。
从我的角度来看，新故事是我们可以在不隐藏它的情况下设置复选框的样式，而无需添加SVG图像和JavaScript代码。这可以通过使用以下代码来完成：
- CSS
出现属性 - HTML
复选标记符号（✓）
外观属性
外观属性用于使用基于用户操作系统主题的平台本机样式显示元素。
这个属性支持许多值，但对我们来说有趣的是值 没有。基本上，我们想要删除所有本机样式并应用自定义样式。最后，我们的复选框将具有漂亮的颜色和过渡，最重要的是，它在所有主流浏览器中的外观和感觉都一样。
用法示例：
。我的课 { -webkit-外观： 值; -moz-外观： 值; / * -o-appearance：value; - 自Opera新版本使用时不需要 - 此属性的webkit前缀，但我们添加它只是为了了解它* / 出现： 值; } 好吧，让我们深入研究代码。
HTML
我们的HTML标记非常简单。我们有一个 标签 点评我们的 输入 和a 跨度 把文本放在里面。它看起来像这样：
<标签 CLASS =“复选框”> <输入 类型=“复选框” /> 检查我 这里没什么太花哨的。我们使用了一个盘点元素，以便更容易垂直对齐内部项目。这是通过我们将在CSS部分中看到的flexbox布局完成的。
CSS
CSS样式看起来像这样：
.checkbox { 显示： 内嵌-FLEX; 光标： 指针; 位置： 相对的; } .checkbox > 跨度 { 颜色： ＃34495E; 填充： 0.5rem 0.25rem; } .checkbox > 输入 { 高度： 25像素; 宽度： 25像素; -webkit-外观： 没有; -moz-外观： 没有; -o-外观： 没有; 出现： 没有; 边界： 1px的 固体 ＃34495E; 边界半径： 4PX; 大纲： 没有; 过渡期： 0.3秒; 背景颜色： ＃41B883; 光标： 指针; } .checkbox > 输入：检查 { 边界： 1px的 固体 ＃41B883; 背景颜色： ＃34495E; } .checkbox > 输入：检查 + 跨度：：之前 { 内容： ' 2713'; 显示： 块; 文本对齐： 中央; 颜色： ＃41B883; 位置： 绝对; 剩下： 0.7rem; 最佳： 0.2rem; } .checkbox > 输入：活性 { 边界： 2px的 固体 ＃34495E; } 如果你认为这仍然是很多CSS让我提醒你，我们不需要flexbox布局或转换来实现这种样式。这是为了使它更优雅。如果我们删除额外的CSS，我们需要做的是通过设置删除默认样式 出现 至 没有，添加边框和着色并设置HTML符号。
让我们分解重要部分来支持上述陈述。第一步是使用 出现 属性并删除默认样式：
... -webkit-外观： 没有; -moz-外观： 没有; -o-外观： 没有; 出现： 没有; ... 希望这个属性很快就会成为标准，我们可以在没有浏览器特定前缀的情况下使用它。
接下来，我们需要提供自定义边框和背景：
... 边界： 1px的 固体 ＃34495E; 边界半径： 4PX; 大纲： 没有; 背景颜色： ＃41B883; 光标： 指针; ... 最后，我们将使用 ：：之前 用于设置HTML符号样式的伪类。在我们检查输入字段之后，下面的CSS将显示颜色很好的HTML符号。
... 内容： ' 2713'; 显示： 块; 文本对齐： 中央; 颜色： ＃41B883; 位置： 绝对; 剩下： 0.7rem; 最佳： 0.2rem; ... 就是这样真的很简单。为了使复选框设计与页面的其余部分相匹配，不再需要JavaScript过度来实现这些样式。我们可以使用此处提供的CSS安全地实现它。
这是一个现场小提琴，可以使用代码：
进一步阅读
如果您对CSS变量感兴趣，请查看我在博客上发布的这篇或这篇文章。
查看外观属性的官方文档