自定义原生多选/单选框样式

最新推荐文章于 2024-05-21 18:30:03 发布

前端-文龙刚

最新推荐文章于 2024-05-21 18:30:03 发布

阅读量668

点赞数 9

分类专栏： html+css 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/135401760

版权

html+css 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

本文详细展示了如何使用HTML和CSS创建自定义的Checkbox和Radio输入框，包括样式调整和伪元素应用，以实现特殊效果。

摘要由CSDN通过智能技术生成

效果图：

input{margin-right:6px;width:.16rem;height:.16rem;border:1px solid #ccd5db;background-color:#fff;-webkit-appearance: none;appearance: none;outline: none;}
input[type="checkbox"]{position:relative;border-color:#ccd5db;}
input[type="checkbox"]:checked{color: #fff;background-color:rgba(159,0,0);border: 1px solid rgba(159,0,0);}
input[type="checkbox"]:checked:after {top:-3px;left:1px;content: "\2713";position:absolute;}
input[type=radio]{border-radius: 50%;display: flex;align-items: center;justify-content: center;}
input[type=radio]:checked {background-color:rgba(159,0,0);border: 1px solid rgba(159,0,0);}
input[type=radio]:after {content: " ";width: 8px;height: 8px;background: #fff;border-radius: 50%;}