radio和checkbox样式的修改

最新推荐文章于 2022-09-15 19:46:35 发布

carior

最新推荐文章于 2022-09-15 19:46:35 发布

阅读量802

点赞数

分类专栏：常用的样式以及板块

本文链接：https://blog.csdn.net/carior/article/details/78049834

版权

常用的样式以及板块专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.radio

/* radio */

input[type="radio"]:checked {
background:url(../images/check2.png) -1px -2px;
background-size: 15px;
border:#00A0E9 1px solid;
}
input[type="radio"] {
-webkit-appearance: none;
border: 1px solid #00A0E9;;
height: 15px;
width: 15px;
outline: none;
vertical-align: middle;
cursor: pointer;
}

关于radio还有一种在点击打开链接上看到，这里先拿过来记录一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.fancy-radio {
    display: block;
    font-weight: normal;
}
.fancy-radio input[type="radio"] {
    display: none;
}
.fancy-radio input[type="radio"] + span {
    display: block;
    cursor: pointer;
    position: relative;
    font-size: 13px;
}
.fancy-radio input[type="radio"] + span i {
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    position: relative;
    bottom: 1px;
    content: "";
    border: 1px solid #ccc;
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.fancy-radio input[type="radio"]:checked + span i:after {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: block;
    position: relative;
    top: 3px;
    left: 3px;
    content: '';
    width: 10px;
    height: 10px;
    background-color: #99a1a7;
}
	</style>
</head>
<body>
	<label class="fancy-radio">
		<input name="gender" value="male" type="radio">
		<span><i></i>Male</span>
	</label>
	<label class="fancy-radio">
		<input name="gender" value="female" type="radio">
		<span><i></i>Female</span>
	</label>
</html>

2.checkbox

/* checkbox */

input[type=checkbox] {
position: relative;
}
input[type=checkbox]::before{
content:'';
position: absolute;
width: 18px;
height: 18px;
top: -4px;
background: url("../images/check1.png") no-repeat;
}
input[type=checkbox]:checked::before {
background: url("../images/check2.png") no-repeat;
content: '';
}

关于checkbox还有一种在http://demo.cssmoban.com/cssthemes4/tid_5_klorofil/index.html上看到在这里先拿过来记录一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.fancy-checkbox {
    display: block;
    font-weight: normal;
}
.fancy-checkbox input[type="checkbox"] {
    display: none;
}
 .fancy-checkbox input[type="checkbox"] + span {
    margin-right: 0;
} 
.fancy-checkbox input[type="checkbox"] + span {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    font-size: 13px;
}
.fancy-checkbox input[type="checkbox"] + span:before {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    content: "";
    border: 1px solid #ccc;
}
.fancy-checkbox input[type="checkbox"]:checked + span:before {
    font-family: FontAwesome;
    /* content: '\f00c'; */
    font-size: 12px;
    color: #99a1a7;
    text-align: center;
    line-height: 16px;
    background: #ededed;
    border: 1px solid #ccc;
}
	</style>
</head>
<body>
	<label class="fancy-checkbox">
		<input type="checkbox"><span></span>
	</label>
</body>
</html>

input[type="radio"]
{
-webkit-appearance: none;/*让原本的样式不起作用（这是重点）*/
border:1px solid #DADADA;/*分割线*/
height:15px;
width:15px;
outline:none;
vertical-align: middle;
cursor: pointer;
}
input[type="radio"]:checked
{
background:#F34E51 url(../images/input_gou.png) 1px 2px;
background-size: 13px;/*背景大小*/
}
input[type="checkbox"]
{
-webkit-appearance: none;/*让原本的样式不起作用（这是重点）*/
border:1px solid #DADADA;/*分割线*/
height:15px;
width:15px;
outline:none;
vertical-align: middle;
cursor: pointer;
}
input[type="checkbox"]:checked
{
background:#F34E51 url(../images/input_gou.png) 1px 2px;
background-size: 13px;/*背景大小*/
}

3.还有关于select的样式后补

carior

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
radio和checkbox样式的修改

1.radio/* radio */input[type="radio"]:checked { background:url(../images/check2.png) -1px -2px; background-size: 15px; border:#00A0E9 1px solid;}input[type="radio"] { -webkit-app...
复制链接

扫一扫