自定义复选框样式
创始人
2025-07-09 12:44:07
0次

input[type="checkbox"] {
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
width:14px;
height:14px;
border:1px solid #999;
border-radius:2px;
line-height:14px;
text-align:center;
}

input[type="checkbox"]:checked {
background:#BF040E;
border:none;
}

input[type="checkbox"]:checked:after {
content:"\2713";
color:#FFF;
}

<div style="display:flex;align-items:center">
<input name="Checkbox" type="checkbox"> 
<label>&nbsp;自动登录</label>
</div>

效果如下：

image.png

image.png

注意：content属性值要用引号引起来。

上一篇：php的安装与配置

下一篇：弹性布局

相关内容

热门资讯

修复：npm : 无法加载文件... 这个错误是由于 PowerShell 的执行策略限制导致的。在某些系统上，默认情况下，PowerSh...
html的data url和b... data urldata url的语法为：data:[][;base64],说明：（1）mediat...
弹性布局 布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。20...
fetch方式发送请求 1、以get方式发送查询字符串fetch("server.php?查询字符串"[,{method:"...
css实现内容裁剪 1、实现单行内容裁剪，后跟省略号overflow:hidden;text-overflow:elli...
css实现强制不换行/自动换行... 强制不换行white-space:nowrap;自动换行word-wrap: break-word;...
js设置html属性和CSS属... js设置html属性：（1）添加属性对象名.属性名=值对象名.setAttribute("属性名",...
php中htmlentitie... htmlentities()和htmlspecialchars()这两个函数的功能都是转换字符为HT...
ajax方式发送请求 1、以get方式发送查询字符串原生：var xhr=new XMLHttpRequest();xhr...
php swoole实现web... 1、使用http连接websocket（ws://）服务器端：