标签：checkbox 自定义 样式 13px height input type

对于checkbox，有时候为了美观，我们需要对其自定义样式。

如：现有禁用的checkbox用于查看页面，默认样式：

我们对其样式调整：

input[type=checkbox]:checked:disabled { appearance: none; -moz-appearance: none; -webkit-appearance: none; width: 13px; height: 13px; position: relative; border: 1px solid rgba(0, 119, 255, 0.7); border-radius: 2px; overflow: hidden; }
    input[type=checkbox]:checked:disabled::before { content: ''; display: block; height: 13px; width: 13px; background: rgba(0, 119, 255, 0.6); position: absolute; top: -1px; left: -1px; border-radius: 2px; }
    input[type=checkbox]:checked:disabled::after { content: '」'; display: block; width: 10px; height: 10px; transform: rotate( 40deg ); position: absolute; top: 1px; left: 2px; overflow: hidden; color: #fff; font-weight: bold; line-height: 6px; }

调整后样式：

对比未禁用的样式：

 看起来高度还原了原本样式，达到了只调整了颜色的效果。

标签：checkbox,自定义,样式,13px,height,input,type
来源： https://www.cnblogs.com/miaolin/p/14661786.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。