教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 337 CSS
很多网站开发的小伙伴觉得浏览器自带的表单复选框单选框样式不好看,想修改默认样式,但是不知道怎么操作。下面小编就将操作方法演示给大家,供大家参考学习!
打开网页开发工具,新建一个HTML文件
编写HTML:表单复选框
编写CSS:复选框的样式
编写CSS部分:复选框选中后的样式
最好打开浏览器预览效果,满意保存即可!
完整代码:
!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、打开浏览器浏览
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
相关文章
怎么用div布局加css样式做网页,怎么做一个网页呢,静态页面的制作是很简单的,我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 479 CSS
css基础教程:[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1,使用网络字体的好处是所有人看到的效果都是样的,效果统一,2,不依赖于用户电脑上是否安装了该字体。......
2023-03-16 327 CSS