前端开发css修改 单选按钮和复选按钮显示样式
摘要： b 前端开发软件 web前端常用开发软件下载 s打头的前端开发软件 css修改 单选按钮和复选按钮显示样式 在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。 大家都知道，要覆写这两个按钮默认样……
| b 前端开发软件 |
| web前端常用开发软件下载 |
| s打头的前端开发软件 |
css修改 单选按钮和复选按钮显示样式
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。
大家都知道，要覆写这两个按钮默认样式比较困难。
在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>复选单选样式</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<style>
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
}
.wrapper {
margin-bottom: 10px;
}
/*复选框*/
.checkbox-box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}
.checkbox-box input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.checkbox-box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
.checkbox-box input[type=’checkbox’] + span {
opacity: 0;
}
.checkbox-box input[type=’checkbox’]:checked + span {
opacity: 1;
}
/*单选框*/
.redio-box {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
position: relative;
background: orange;
vertical-align: middle;
border-radius: 100%;
}
.redio-box input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; /*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}
.redio-box span {
display: block;
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
background: #fff;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
z-index: 1;
}
.redio-box input[type=’radio’] + span {
opacity: 0;
}
.redio-box input[type=’radio’]:checked + span {
opacity: 1;
}
</style>
<body>
<h2>复选框：</h2>
<form action=”#”>
<div class=”wrapper”>
<div class=”checkbox-box”>
<input name=”1″ type=”checkbox” checked id=”usename” />
<span>√</span>
</div>
<label for=”usename”>体育</label>
</div>
<div class=”wrapper”>
<div class=”checkbox-box”>
<input name=”1″ type=”checkbox” id=”usepwd” />
<span>√</span>
</div>
<label for=”usepwd”>音乐</label>
</div>
<div class=”wrapper”>
<div class=”checkbox-box”>
<input name=”1″ type=”checkbox” id=”checkbox3″ />
<span>√</span>
</div>
<label for=”checkbox3″>读书</label>
</div>
<div class=”wrapper”>
<div class=”checkbox-box”>
<input name=”1″ type=”checkbox” id=”checkbox4″ />
<span>√</span>
</div>
<label for=”checkbox4″>运动</label>
</div>
</form>
<h2>单选框</h2>
<form action=”#”>
<div class=”wrapper”>
<div class=”redio-box”>
<input
type=”radio”
checked=”checked”
id=”boy”
name=”1″
/><span></span>
</div>
<label for=”boy”>男</label>
</div>
<div class=”wrapper”>
<div class=”redio-box”>
<input type=”radio” id=”girl” name=”1″ /><span></span>
</div>
<label for=”girl”>女</label>
</div>
</form>
</body>
</html>
注：
- 是css的相邻选择符。
关系选择符只有四种,是 空格 > + ~ （包含选择符、子选择符、相邻选择符、兄弟选择符）
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>复选单选样式</title>
<link rel=”stylesheet” href=”checkbox.css” />
</head>
<style>
/*复选框*/
.checkbox-box {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
position: relative;
border: 2px solid #0099ff;
vertical-align: middle;
}
.checkbox-box input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 10;
margin: 0;
padding: 0;
}
.checkbox-box span.icon {
position: absolute;
top: -3px;
right: 2px;
font-size: 16px;
font-weight: bold;
font-family: Arial;
color: #0099ff;
}
.checkbox-box span.icon:after {
content: ‘\2713’;
}
.checkbox-box input[type=’checkbox’] + span.icon {
opacity: 0;
}
.checkbox-box input[type=’checkbox’]:checked + span.icon {
opacity: 1;
}
/*单选框*/
.redio-box {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
position: relative;
border: 2px solid #0099ff;
vertical-align: middle;
}
.redio-box input {
margin: 0;
padding: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; /*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}
.redio-box span.icon {
position: absolute;
top: -3px;
right: 2px;
font-size: 16px;
font-weight: bold;
font-family: Arial;
color: #0099ff;
}
.redio-box span.icon:after {
content: ‘\2713’;
}
.redio-box input[type=’radio’] + span.icon {
opacity: 0;
}
.redio-box input[type=’radio’]:checked + span.icon {
opacity: 1;
}
</style>
<body>
<h2>复选框：</h2>
<form action=”#”>
<div class=”wrapper”>
<div class=”checkbox-box”>
<input name=”1″ type=”checkbox” checked id=”usename” />
<span class=”icon”></span>
</div>
<label for=”usename”>未婚</label>
</div>
<div class=”wrapper”>
<div class=”checkbox-box”>
<input name=”1″ type=”checkbox” id=”usepwd” />
<span class=”icon”></span>
</div>
<label for=”usepwd”>已婚</label>
</div>
<div class=”wrapper”>
<div class=”checkbox-box”>
<input name=”1″ type=”checkbox” id=”checkbox3″ />
<span class=”icon”></span>
</div>
<label for=”checkbox3″>离异</label>
</div>
<div class=”wrapper”>
<div class=”checkbox-box”>
<input name=”1″ type=”checkbox” id=”checkbox4″ />
<span class=”icon”></span>
</div>
<label for=”checkbox4″>丧偶</label>
</div>
</form>
<h2>单选框</h2>
<form action=”#”>
<div class=”wrapper”>
<div class=”redio-box”>
<input
type=”radio”
checked=”checked”
id=”boy”
name=”1″
/><span class=”icon”></span>
</div>
<label for=”boy”>男</label>
</div>
<div class=”wrapper”>
<div class=”redio-box”>
<input type=”radio” id=”girl” name=”1″ /><span
class=”icon”
></span>
</div>
<label for=”girl”>女</label>
</div>
</form>
</body>
</html>
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>checkbox</title>
<link rel=”stylesheet” href=”checkbox.css” />
<style>
input {
border: none;
box-sizing: border-box;
outline: none;
}
.item-checkbox {
position: relative;
width: 100%;
height: 40px;
padding-left: 30px;
}
.checkbox {
position: absolute;
top: 50%;
right: 0;
left: 0;
z-index: 3;
display: inline-block;
cursor: pointer;
transform: translateY(-50%);
color: #656565;
}
.checkbox input {
position: relative;
width: 18px;
height: 18px;
display: block;
border: 0;
background: 0 0;
cursor: pointer;
-webkit-appearance: none;
margin: 0;
margin-left: 1px;
}
.checkbox input:before {
display: table;
width: 100%;
height: 100%;
border-width: 1px;
border-style: solid;
border-radius: 0;
background: #fff;
border-color: #bbb;
content: ‘ ‘;
-webkit-transition: background-color 20ms ease-in-out;
transition: background-color 20ms ease-in-out;
}
.checkbox input:after {
-webkit-transition: opacity 0.05s ease-in-out;
transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
display: table;
width: 12px;
top: 30%;
left: 19%;
height: 6px;
border: 2px solid #fff;
border-top: 0;
border-right: 0;
content: ‘ ‘;
opacity: 0;
}
.checkbox input:before,
.checkbox input:after {
box-sizing: border-box;
}
.checkbox input:checked:after {
opacity: 1;
}
.checkbox input:checked:before {
background: #11b7f5;
border-color: #11b7f5;
border-radius: 0;
}
.item-radiobox {
position: relative;
width: 100%;
height: 40px;
padding-left: 30px;
}
.radio-box {
position: absolute;
top: 50%;
right: 0;
left: 0;
z-index: 3;
display: inline-block;
cursor: pointer;
transform: translateY(-50%);
color: #656565;
}
.radio-box input {
position: relative;
width: 18px;
height: 18px;
display: block;
border: 0;
background: 0 0;
cursor: pointer;
-webkit-appearance: none;
margin: 0;
margin-left: 1px;
}
.radio-box input:before {
display: table;
width: 100%;
height: 100%;
border-width: 1px;
border-style: solid;
border-radius: 0;
background: #fff;
border-color: #bbb;
content: ‘ ‘;
-webkit-transition: background-color 20ms ease-in-out;
transition: background-color 20ms ease-in-out;
}
.radio-box input:after {
-webkit-transition: opacity 0.05s ease-in-out;
transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
display: table;
width: 12px;
top: 30%;
left: 19%;
height: 6px;
border: 2px solid #fff;
border-top: 0;
border-right: 0;
content: ‘ ‘;
opacity: 0;
}
.radio-box input:before,
.radio-box input:after {
box-sizing: border-box;
}
.radio-box input:checked:after {
opacity: 1;
}
.radio-box input:checked:before {
background: #11b7f5;
border-color: #11b7f5;
border-radius: 0;
}
</style>
</head>
<body style=”margin:20px;”>
<h2>多选</h2>
<label class=”item-checkbox”>
<label class=”checkbox”>
<input type=”checkbox” checked=”” /> </label
>记住账号
</label>
<br /><br />
<label class=”item-checkbox”>
<label class=”checkbox”> <input type=”checkbox” /> </label>体育
</label>
<br /><br />
<label class=”item-checkbox”>
<label class=”checkbox”> <input type=”checkbox” /> </label>美术
</label>
<br />
<h2>单选</h2>
<br />
<label class=”item-radiobox”>
<label class=”radio-box “>
<input type=”radio” checked=”” name=”sex” /> </label
>男
</label>
<br /><br />
<label class=”item-radiobox”>
<label class=”radio-box “> <input type=”radio” name=”sex” /> </label
>女
</label>
</body>
</html>
美化单选框
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>美化单选</title>
</head>
<body>
<style>
input[type=’radio’] {
-webkit-appearance: none;
border: 0;
outline: 0 !important;
}
input[type=’radio’]:after {
content: ”;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 10px;
font-size: 20px;
color: #fff;
border: 3px solid #ddd;
background-color: #fff;
box-sizing: border-box;
}
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: #09f;
background-color: #09f;
transition: background-color 1s ease;
}
</style>
<input type=”radio” name=”myradio” />
</body>
</html>
| web前端开发 编程软件下载 |
| 软件前端开发晋升制度 |
| 前端开发编程软件 |
» 本文来自：前端开发者 » 《前端开发css修改 单选按钮和复选按钮显示样式》
» 本文链接地址：https://www.rokub.com/6904.html
» 您也可以订阅本站：https://www.rokub.com
近期评论