CSS秘密花园：自定义复选框_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS秘密花园：自定义复选框_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5504字，纯文字阅读大概需要8分钟。
内容图文
《 CSS Secrets 》是 @Lea Verou 最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。
设计师总是希望能够对Web页面上的每个元素都能有更多的控制。当一个CSS经验有限的图形设计师需要创建一个网站案例时，他们很喜欢自定义表单元素，然后让开发人员来把它转变成CSS。
对于可读性，在这一整节中，我们都会使用“checkbox”，但是讨论的内容都适用于复选框和单选按钮，除非有特别说明。
在CSS刚开始引入的时候，表单样式是非常有限的，而且没有在任何的各种CSS规范中明确定义。但是，浏览器对CSS属性越来越宽松，它们允许表单控制，可以让我们有相当大的空间去给它们添加样式。
可惜的是，复选框和单选按钮不在可控制的表单控件列表中。现在，大多数浏览器基本都是选择不给它们添加样式。结果是，作者要么使用默认外观，要么使用繁琐的标签来完成，如使用 div 和JavaScript来重建它们。
有没有什么办法可以让我们摆脱这些限制，然后自定义我们的复选框样式呢，不要那些臃肿的代码，不要放弃语义性和可访问性？
解决方案
直到几年前，如果不用脚本，这个任务基本是不可能完成的。但是，在 CSS3 中，我们有了一个新的伪类： :checked 。这个伪类只能在复选框被选中时匹配，无论这个选中状态是通过用户交互还是脚本实现的。
:checked 和属性选择器 [checked] 之间有什么不同吗？后者不会基于用户交互更新，因为用户交互不会影响HTML属性。
如果是直接应用于复选框的话并不是特别有用，如——像我们前面提到的——没有多少属性可以让我们成功地给它们应用样式。但是，我们根据复选框的状态，给其它元素添加样式，并把它们组合起来。
你可能会奇怪有什么其它元素可以让我们使用，并能辨别复选框是否处于选中状态。不错，确实存在一种元素可以围绕复选框有不同的状态：
因为标签——不像复选框——不是替换元素，我们可以为它们添加生成的内容，还可以基于复选框的状态给它们应用不同的样式。然后，我们通过某种方式隐藏真正的复选框，但是不从tab键的切换中将其删除，然后将生成的内容伪装成是经过添加样式的复选框！
将复选框嵌入标签中可以让我们从使用 id 中解放，但随后，我们就不能根据复选框的状态来选中标签了，因为我们还没有父选择器。
我们来实践一下。我们可以从下面这个简单的示例开始：
下一步是生成一个伪元素，伪装成我们已添加样式的复选框，并为它应用如下的基本样式：
input[type="checkbox"] + label::before { content: '\a0'; /* non-break space */ display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .2em; border-radius: .2em; background: silver; text-indent: .15em; line-height: .65;} 你可以在下图中看到我们的复选框和标签的当前样式。
初始的复选框仍然是可见的，但是我们会在后边把它隐藏掉。现在我们需要给选中状态的复选框应用一个不同的样式。可以简单地应用一个不同的颜色，并添加一个如下的复选标记：
input[type="checkbox"]:checked + label::before { content: '\2713'; background: yellowgreen;} 我们将应用于我们复选框的样式在这些示例中是非常基础的，但是可能性是无穷的！你甚至可以完全跳过CSS样式，然后使用图片表示不同的复选框状态！
如上图所示，这已经是一个具有初步样式的复选框。现在我们需要通过一个可访问的方式隐藏初始的复选框，这也就意味着我们不可以使用 display: none ，因为这样的话就会把它从整个tab键顺序中删掉了。所以，我们可以使用如下的代码：
input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0);}
使用这种宽松的选择器时要小心。使用 input[type="checkbox"] 会隐藏复选框，而且后面不会有一个标签（如，那些嵌入在标签中的），这样会从根本上导致它们无法使用。
就是它了，我们已经做出了一个很基本的自定义复选框！当然我们还可以再做一些提升——比如，在它处于 focused 或 disabled 的状态时改变一下样式：
input[type="checkbox"]:focus + label::before { box-shadow: 0 0 .1em .1em #58a;}input[type="checkbox"]:disabled + label::before { background: gray; box-shadow: none; color: #555;} 效果如下图所示：
从上到下：自定义 focus 状态的复选框，自定义 disabled 状态的复选框， checked 状态的复选框 。
你甚至可以通过应用过渡或动画或弹跳让这些效果更平滑，然后创建像sekuomorphic开关这样的东西，可能性是无穷无尽的！
尽管可能是无穷的，也切记不要把复选框变成圆形：很多用户会把它当成单选按钮。正方形单选按钮也是一样。
Ryan Seddon创建了这个效果的第一个版本，他现在被称为“ the checkbox hack ”。Ryan使用这个方法 实现了很多可以切换状态的小部件 ，如模拟对话框，下拉菜单，选项卡，轮播图等，虽然滥用复选框也导致了可访问性的问题。
开关按钮
你可以使用不同的“the checkbox hack”来模拟开关按钮，因为HTML没有提供一个native的方式来创建它们。开关按钮就是像复选框那样拨动开关：它们用来将某个设置打开或关闭，在选中状态时看起来像是按下的，在未选中状态时看起来就像是没有按下的。从语义上讲，开关按钮和复选框之间并没有真正的区别，所以你都可以使用这些技巧并保持语义纯度。
为了使用这些技巧创建开关按钮，你只需要把标签弄成按钮那样的样式，而不是使用伪元素。例如，创建如图所示的开关按钮
代码如下：
input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0);}input[type="checkbox"] + label { display: inline-block; padding: .3em .5em; background: #ccc; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px white;}input[type="checkbox"]:checked + label,input[type="checkbox"]:active + label { box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset; border-color: rgba(0,0,0,.3); background: #bbb;} 所以，要谨慎使用开关按钮。在大多数情况下，开关按钮会妨碍可用性，因为它们会很容易地与普通按钮被按下时将执行的操作相混淆。
内容总结
以上是互联网集市为您收集整理的CSS秘密花园：自定义复选框_html/css_WEB-ITnose全部内容，希望文章能够帮你解决CSS秘密花园：自定义复选框_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。