CSS怎么修改表单复选框checkbox的样式

2025-10-03 19:40:57

1、打开网页开发工具,新建一个HTML文件

CSS怎么修改表单复选框checkbox的样式

2、编写HTML:表单复选框

CSS怎么修改表单复选框checkbox的样式

3、编写CSS:复选框的样式

CSS怎么修改表单复选框checkbox的样式

4、编写CSS部分:复选框选中后的样式

CSS怎么修改表单复选框checkbox的样式

5、最好打开浏览器预览效果,满意保存即可!

CSS怎么修改表单复选框checkbox的样式

6、完整代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>CSS怎么修改表单复选框checkbox的样式</title>

<style type="text/css">

#fxk{

width: 16px; height: 16px;  background-color: #fff;            

border: 1px solid #c9c9c9; border-radius: 2px;

color: #fff; text-align: center; line-height: 15px;

-webkit-appearance:none; appearance:none; outline: none;

}

#fxk[type="checkbox"]:hover{ border: 1px solid #43adea;}

#fxk:checked {

color: #fff;background-color: #43adea;  border: 1px solid #43adea; 

}

#fxk:after {content: "\2713";}  

</style>

</head>

<body style="padding: 50px;">

<label>原始复选框</label>

<input type="checkbox" value="复选框" />

<label>修改后复选框</label>

<input type="checkbox" value="复选框" id="fxk" />

</body>

</html>

1、新建HTML文件

2、边界HTML标签

3、编写CSS

4、打开浏览器浏览

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢