html中的checkbox如何修改样式?

 我来答
无名小卒udl
高粉答主

推荐于2019-10-01 · 每个回答都超有意思的
知道大有可为答主
回答量:187
采纳率:100%
帮助的人:5.9万
展开全部

把以下代码添加到css样式里即可修改checkbo样式:

[css] view plain copy

input[type=radio],input[type=checkbox]  {  

display: inline-block;  

vertical-align: middle;  

width: 20px;  

height: 20px;  

margin-left: 5px;  

-webkit-appearance: none;  

background-color: transparent;  

border: 0;  

outline: 0 !important;  

line-height: 20px;  

color: #d8d8d8;  

}  

input[type=radio]:after  {  

content: "";  

display:block;  

width: 20px;  

height: 20px;  

border-radius: 50%;  

text-align: center;  

line-height: 14px;  

font-size: 16px;  

color: #fff;  

border: 2px solid #ddd;  

background-color: #fff;  

box-sizing:border-box;  

}  

input[type=checkbox]:after  {  

content: "";  

display:block;  

width: 20px;  

height: 20px;  

text-align: center;  

line-height: 14px;  

font-size: 16px;  

color: #fff;  

border: 2px solid #ddd;  

background-color: #fff;  

box-sizing:border-box;  

}  

input[type=checkbox]:checked:after  {  

border: 4px solid #ddd;  

background-color: #37AF6E;  

}  

input[type=radio]:checked:after  {  

content: "L";  

transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);  

-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);  

border-color: #37AF6E;  

background-color: #37AF6E;  

}

Html5标签:

  1. <!--...--> 定义注释。

  2. <!DOCTYPE> 定义文档类型。

  3. <a> 定义锚。

  4. <abbr> 定义缩写。

  5. <acronym> 定义只取首字母的缩写。

  6. <address> 定义文档作者或拥有者的联系信息。

  7. <applet> 不赞成使用。定义嵌入的 applet。

  8. <area> 定义图像映射内部的区域。

  9. <article> 定义文章。

  10. <aside> 定义页面内容之外的内容。

  11. <audio> 定义声音内容。

  12. <b> 定义粗体字。

  13. <base> 定义页面中所有链接的默认地址或默认目标。

  14. <basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。

  15. <bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置。

  16. <bdo> 定义文字方向。

  17. <big> 定义大号文本。

  18. <blockquote> 定义长的引用。

  19. <body> 定义文档的主体。

  20. <br> 定义简单的折行。

  21. <button> 定义按钮 (push button)。

  22. <canvas> 定义图形。

  23. <caption> 定义表格标题。

  24. <center> 不赞成使用。定义居中文本。

  25. <cite> 定义引用(citation)。

  26. <code> 定义计算机代码文本。

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式