自定义按钮样式

在一些网站上，经常可以看到修改后的按钮选项。比如因为之前在B端公司待过，风格差不多就OK了，所以就没研究了。昨天在刷百度前端学院的时候遇到一个问题，就是改造checkbox单选样式。大概研究了一下最常见的自定义按钮样式，其实就是通过label模拟出来的。关于label，可以在mdn中查看label的for和formid是否对应，click对应的form激活click通过上面的例子，只要标签的for属性和表单的id对应，那么点击标签就相当于点击表单。这样我们就可以隐藏原来的input，修改label的样式。最简单的实现是csslabel{width:16px;高度：16px；border:1pxsolid#d9d9d9;display:flex}input{display:none}.demo:checked+label{border:1pxsolidred;font-weight:700;}.demo:checked+label::after{margin:auto;content:'';color:red;width:8px;height:8px;line-height:8px;text-align:center;字体大小：12px；边框半径：50%；背景：红色；}html