--- --- restore content begins
In many cases, the browser that comes with style radio buttons and check boxes are not beautiful, and with a difference in style between the browser. Our production has been insufficient demand. Here customize modify the style radio buttons and check boxes with css.
First we look at the example of the effect:
The figure is an example of my side renderings, and places the entire code attached to the last, by reference.
- Box custom style
Checkbox problems we most frequently encounter is pigeon-style variety, or a variety of colors.
Logical approach here is the custom box style: clear the check box original style, redefine the style and the style in case input is selected, the check mark can be used to fill the picture.
Html box as follows:
<input type="checkbox" id="checkbox1"><label for="checkbox1">123</label> <input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>
Box above styles are as follows:
input[type="checkbox"] {
width: 20px;
height: 20px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 2px;
outline: none;
}
input[type="checkbox"]:checked {
background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
no-repeat center;
background-size: 100% 100%;
}
As used herein attribute selectors select the check box, appearance: none Clear restyle after the default style. Check box is checked using the picture fill.
- Single-box custom style
Single-box custom logic: Clear default style radio using pseudo-element simulation checkbox style.
Examples of gender html reads as follows:
<p>您的性别：</p>
<div class="radio-sex">
<input type="radio" id="sex1" name="sex">
<label for="sex1"></label>
<span>男</span>
</div>
<div class="radio-sex">
<input type="radio" id="sex2" name="sex">
<label for="sex2"></label>女
</div>
css as follows:
Sex {-.radio
position: relative;
the display: inline-Block;
margin-right: 12px;
}
.radio INPUT {Sex-
Vertical-align = left: Middle;
/ * in front of three lines of code to make the radio button radio text alignment * /
width: 20px;
height: 20px;
Appearance: none; / * clear the default style * /
-webkit-Appearance: none;
Opacity: 0;
Outline: none;
/ * note can not be set as the display: none * /
}
.radio label {-sex
position: Absolute;
left: 0;
Top: 0;
Z-index:. 1;
/ * Note hierarchy, if the label is not set to the lowest level, but will not block the radio input * /
width: 20px ;
height: 20px;
border: 1px Solid # 3582e9;
border-RADIUS: 100%;
}
.radio-sex input[type="radio"]:checked + label {
background: #3582e9;
}
.radio-sex input[type="radio"]:checked + label::after {
content: "";
position: absolute;
left: 7px;
top: 2px;
width: 5px;
height: 12px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
}
.radio-sex span{
vertical-align: middle;
}
Select the radio button to use the style attribute selectors,: checked selector, adjacent sibling selectors and pseudo-elements is completed. When selected, the checkmark by providing the right border and bottom border effects achieved by rotating 45 degrees.
Other single-box styles and colors and numbers on top of the examples of the same.
Examples of small numbers inside the lower right corner of the check mark by introducing Ali is my library inside the icon of the vector.
Paste the entire code below for reference:
<template>
<div class="main">
<div class="div">123</div>
<input type="checkbox" id="checkbox1"><label for="checkbox1">123</label>
<input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>
<p>您的性别：</p>
<div class="radio-sex">
<input type="radio" id="sex1" name="sex">
<label for="sex1"></label>
<span>男</span>
</div>
<div class="radio-sex">
<input type="radio" id="sex2" name="sex">
<label for="sex2"></label>女
</div>
<p>喜欢的颜色：</p>
<div class="radio-label">
<input type="radio" id="color1" name="color">
<label for="color1">蓝色</label>
</div>
<div class="radio-label">
<input type="radio" id="color2" name="color">
<label for="color2">红色22</label>
</div>
<div class="radio-label">
<input type="radio" id="color3" name="color">
<label for="color3">绿色333</label>
</div>
<span class="iconfont" style="color: red"></span>
<p>喜欢的数字：</p>
<div class="radio-check">
<input type="radio" id="num1" name="num" :checked="num=='num1'" @click="num='num1'">
<label for="num1">一1</label>
<span class="iconfont iconq"></span>
</div>
<div class="radio-check">
<input type="radio" id="num2" name="num" :checked="num=='num2'" @click="num='num2'">
<label for="num2">二222222</label>
<span class="iconfont iconq"></span>
</div>
<div @click="write()">点我输出你喜欢的数字：{{num}}</div>
</div>
</template>
<script>
export default {
name: 'input-component',
data() {
return {
num:'num1'
}
},
methods:{
write(){
console.log(this.num)
}
}
}
</script>
<style lang="scss" scoped>
@font-face {
font-family: 'iconfont'; /* project id 1313406 */
src: url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.eot');
src: url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.woff') format('woff'),
url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.svg#iconfont') format('svg');
}
.main{
padding:20px;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p{
margin: 15px 0;
}
.div:before {
content: url(http://www.w3school.com.cn/i/w3school_logo_white.gif);
}
input[type="checkbox"] {
width: 20px;
height: 20px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 2px;
outline: none;
}
input[type="checkbox"]:checked {
background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
Center-REPEAT NO;
background-size: 100% 100%;
}
.radio-Sex {
position: relative;
the display: inline-Block;
margin-right: 12px;
}
.radio INPUT {Sex-
Vertical-align = left: Middle;
/ * in front of three lines of code to make the radio button radio text alignment * /
width: 20px;
height: 20px;
Appearance: none; / * clear the default style * /
-webkit-Appearance: none;
Opacity: 0;
Outline: none ;
/ * note can not be set as the display: none * /
}
.radio-Sex label {
position: Absolute;
left: 0;
Top: 0;
Z-index:. 1;
/ * Note hierarchy, if the label is not set level lowest, will not block the input radio * /
width: 20px;
height: 20px;
border: 1px Solid # 3582e9;
border-the RADIUS: 100%;
}
.radio-Sex input [ = type "Radio"]: label the checked + {
background: # 3582e9;
}
.radio-sex input[type="radio"]:checked + label::after {
content: "";
position: absolute;
left: 7px;
top: 2px;
width: 5px;
height: 12px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
}
.radio-sex span{
vertical-align: middle;
}
/* 喜欢的颜色 */
.radio-label,
.radio-check {
display: inline-block;
position: relative;
}
.radio-label input[type="radio"] {
appearance: none; /*清楚默认样式*/
-webkit-appearance: none;
/* opacity: 0; */
outline: none;
position: absolute;
z-index: 2;
width: 6px;
height: 6px;
top: 10px;
left: 10px;
border-radius: 50%;
background: #b4b4b4;
}
.radio-label label {
display: inline-block;
min-width: 50px;
height: 24px;
line-height:24px;
text-align: center;
padding-right: 10px;
border-radius: 5px;
padding-left: 25px;
color: #fff;
background-color: #c9c9c9;
}
.radio-label input[type="radio"]:checked {
opacity: 0;
}
.radio-label input[type="radio"]:checked + label {
color: #fff;
background-color: #3597db;
}
.radio-label input[type="radio"]:checked + label::after {
content: "";
position: absolute;
left: 12px;
top: 5px;
width: 5px;
height: 12px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
}
.iconq {
font-size: 25px;
position: absolute;
right: -11px;
bottom: -11px;
z-index: 1;
opacity: 0;
}
/* 喜欢的数字 */
.radio-check input[type="radio"] {
appearance: none;/ * Clear the default style * /
-webkit-appearance: none;
/* opacity: 0; */
outline: none;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
background: #b4b4b4;
}
.radio-check input[type="radio"] {
opacity: 0;
}
.radio-check label {
display: inline-block;
/* min-width: 50px; */
height: 24px;
line-height: 24px;
text-align: center;
padding-right: 10px;
border: 1px solid #c9c9c9;
border-radius: 5px;
padding-left: 10px;
cursor: pointer;
}
.radio-check input[type="radio"]:checked + label + span {
color: #3597db;
opacity: 1;
}
.radio-check input[type="radio"]:checked + label {
border-color: #3597db;
}
.radio-check input[type="radio"]:hover + label {
border-color: #3597db;
}
</style>
Of course, there are other ways, through dynamic binding class can be simulated radio button selected style.
The above code to the test is successful, welcome to leave a message.