[css] 第252天 如何修改美化radio、checkbox的默认样式？

[haizhilin2013]

第252天 如何修改美化radio、checkbox的默认样式？

我也要出题

[cxwht]

利用after伪元素自定义radio或者checkbox 或是利用图片进行样式修改

[Wyt-GitHub8000]

美化 radio 和 checkbox 的默认样式，一般可以通过 CSS 来实现。以下是一些常用的方法：

使用 :before 和 :after 伪元素来创建自定义的样式，并通过 CSS 控制元素的大小、颜色等属性。

/ 美化 checkbox / input[type="checkbox"] { position: relative; width: 20px; height: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: 1px solid #999; border-radius: 3px; box-shadow: inset 0 0 0 2px #fff; }

input[type="checkbox"]:checked:before { content: '\2713'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: #fff; }

/ 美化 radio / input[type="radio"] { position: relative; width: 20px; height: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: 1px solid #999; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; }

input[type="radio"]:checked:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: #999; }

使用图片来代替默认的样式。

/ 美化 checkbox / input[type="checkbox"] { display: none; }

input[type="checkbox"] + label { display: inline-block; width: 20px; height: 20px; background: url('checkbox.png') no-repeat; cursor: pointer; }

input[type="checkbox"]:checked + label { background-position: -20px 0; }

/ 美化 radio / input[type="radio"] { display: none; }

input[type="radio"] + label { display: inline-block; width: 20px; height: 20px; background: url('radio.png') no-repeat; cursor: pointer; }

input[type="radio"]:checked + label { background-position: -20px 0; } 这里使用了两张图片来代替 checkbox 和 radio 的默认样式，当选中时，改变图片的背景位置来实现美化效果。

需要注意的是，不同浏览器的默认样式可能存在差异，因此需要根据实际情况进行适配。同时，使用自定义的样式来代替默认样式可能会影响到可访问性，因此需要谨慎使用，并根据实际需求进行选择。