静态radio
静态的,没有添加js效果,可以封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选框</title>
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_570150_3p5eimweh1q.css">
<style>
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
<link rel="stylesheet/less" type="text/css" href="./radio.less"/>
<script src="../assets/less.min.js" type="text/javascript"></script>
</head>
<body>
<h3>单选框</h3>
<div class="single-way-one">
<p>方式一:</p>
<span class="r-single">
<span class="r-show-radio r-checked">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
<span class="r-single ml15">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</div>
<div class="single-way-two">
<p>方式二:</p>
<span class="r-single">
<span class="r-show-radio r-checked">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
<span class="r-single ml15">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</div>
<div class="single-way-three">
<p>方式三:</p>
<span class="r-single-button">
<span class="r-single">
<span class="r-show-radio r-checked">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</span>
<span class="r-single-button">
<span class="r-single">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</span>
</div>
<div class="single-way-four">
<p>方式四:</p>
<span class="r-single r-checked">
<input type="radio" class="r-hide-input">
<span class="r-show-text">选项一</span>
</span>
<span class="r-single">
<input type="radio" class="r-hide-input">
<span class="r-show-text">选项二</span>
</span>
</div>
<div class="horize-way">
<h3>横向组:</h3>
<p>方式一:</p>
<div class="horize-group-one">
<span class="r-single">
<span class="r-show-radio r-checked">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
<span class="r-single">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
<span class="r-single">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
<span class="r-single">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</div>
<p>方式二:</p>
<div class="horize-group-two">
<span class="r-single-button">
<span class="r-single">
<span class="r-show-radio r-checked">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</span>
<span class="r-single-button">
<span class="r-single">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</span>
<span class="r-single-button">
<span class="r-single">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</span>
<span class="r-single-button">
<span class="r-single">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</span>
</div>
<p>方式三:</p>
<div class="horize-group-three">
<span class="r-single r-checked">
<input type="radio" class="r-hide-input">
<span class="r-show-text">选项一</span>
</span>
<span class="r-single">
<input type="radio" class="r-hide-input">
<span class="r-show-text">选项一</span>
</span>
<span class="r-single">
<input type="radio" class="r-hide-input">
<span class="r-show-text">选项一</span>
</span>
<span class="r-single">
<input type="radio" class="r-hide-input">
<span class="r-show-text">选项一</span>
</span>
</div>
</div>
<div class="vertical-way">
<h3>纵向选择</h3>
<p>方式一:</p>
<div class="vertic-group-one">
<span class="r-single vertic-show-way">
<span class="r-show-radio r-checked">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
<span class="r-single vertic-show-way">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
<span class="r-single vertic-show-way">
<span class="r-show-radio">
<input type="radio" class="r-hide-input">
</span>
<span class="r-s-text">
选项一
</span>
</span>
</div>
</div>
</body>
</html>
.ml15{
margin-left: 15px;
}
//单独一项radio
.single-way-one{
.r-single{
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
font-size: 14px;
.r-hide-input{
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
}
.r-show-radio{
position: relative;
display: inline-block;
height: 16px;
width: 16px;
border: 1px solid #dcdfe6;
border-radius: 50%;
vertical-align: bottom;
&:after{
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #fff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(0);
transition: transform .15s ease-in;
}
}
.r-checked{
background-color: #409eff;
&:after{
transform: translate(-50%,-50%) scale(1);
}
}
}
.single-way-two{
.r-single{
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
font-size: 14px;
.r-hide-input{
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
}
.r-show-radio{
position: relative;
display: inline-block;
height: 16px;
width: 16px;
border: 1px solid #dcdfe6;
border-radius: 50%;
vertical-align: bottom;
&:after{
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #409eff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(0);
transition: transform .15s ease-in;
}
}
.r-checked{
&:after{
transform: translate(-50%,-50%) scale(1);
}
}
}
.single-way-three{
.r-single-button{
display: inline-block;
color: #606266;
font-weight: 500;
position: relative;
cursor: pointer;
white-space: nowrap;
outline: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
padding: 10px 15px;
.r-single{
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
font-size: 14px;
.r-hide-input{
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
}
.r-show-radio{
position: relative;
display: inline-block;
height: 16px;
width: 16px;
border: 1px solid #dcdfe6;
border-radius: 50%;
vertical-align: bottom;
&:after{
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #409eff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(0);
transition: transform .15s ease-in;
}
}
.r-checked{
&:after{
transform: translate(-50%,-50%) scale(1);
}
}
}
}
.single-way-four{
.r-single{
display: inline-block;
text-align: center;
border: #dcdfe6 solid 1px;
height: 40px;
padding:0 15px;
line-height: 40px;
color: #666666;
overflow: hidden;
position: relative;
}
.r-checked{
&:before{
content: '';
display: block;
width: 3px;
height: 8px;
border-right: #ffffff solid 2px;
border-bottom: #ffffff solid 2px;
transform: rotate(35deg);
position: absolute;
bottom: 2px;
right: 4px;
z-index: 2;
}
&:after{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: #d51917;
transform: skewY(-45deg);
position: absolute;
bottom: -10px;
right: 0;
z-index: 1;
}
}
.r-hide-input{
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
}
.r-show-text{
font-size: 14px;
}
}
//横向组radio
.horize-way{
.horize-group-one{
display: inline-block;
vertical-align: middle;
font-size: 0;
.r-single+.r-single {
margin-left: 30px;
}
.r-single{
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
font-size: 14px;
.r-hide-input{
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
}
.r-show-radio{
position: relative;
display: inline-block;
height: 16px;
width: 16px;
border: 1px solid #dcdfe6;
border-radius: 50%;
vertical-align: bottom;
&:after{
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #fff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(0);
transition: transform .15s ease-in;
}
}
.r-checked{
background-color: #409eff;
&:after{
transform: translate(-50%,-50%) scale(1);
}
}
}
.horize-group-two{
display: inline-block;
vertical-align: middle;
font-size: 0;
.r-single-button+.r-single-button{
border-left: 0;
}
.r-single-button{
display: inline-block;
color: #606266;
font-weight: 500;
position: relative;
cursor: pointer;
white-space: nowrap;
outline: none;
border: 1px solid #dcdfe6;
box-sizing: border-box;
padding: 10px 15px;
.r-single{
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
font-size: 14px;
.r-hide-input{
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
}
.r-show-radio{
position: relative;
display: inline-block;
height: 16px;
width: 16px;
border: 1px solid #dcdfe6;
border-radius: 50%;
vertical-align: bottom;
&:after{
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #409eff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(0);
transition: transform .15s ease-in;
}
}
.r-checked{
&:after{
transform: translate(-50%,-50%) scale(1);
}
}
}
}
.horize-group-three{
display: inline-block;
vertical-align: middle;
font-size: 0;
.r-single+.r-single{
border-left: none;
}
.r-single{
display: inline-block;
text-align: center;
border: #dcdfe6 solid 1px;
height: 40px;
padding:0 15px;
line-height: 40px;
color: #666666;
overflow: hidden;
position: relative;
}
.r-checked{
&:before{
content: '';
display: block;
width: 3px;
height: 8px;
border-right: #ffffff solid 2px;
border-bottom: #ffffff solid 2px;
transform: rotate(35deg);
position: absolute;
bottom: 2px;
right: 4px;
z-index: 2;
}
&:after{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: #d51917;
transform: skewY(-45deg);
position: absolute;
bottom: -10px;
right: 0;
z-index: 1;
}
}
.r-hide-input{
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
}
.r-show-text{
font-size: 14px;
}
}
}
//纵向组radio
.vertical-way{
.vertic-group-one{
.r-single{
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
font-size: 14px;
.r-hide-input{
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
}
.r-show-radio{
position: relative;
display: inline-block;
height: 16px;
width: 16px;
border: 1px solid #dcdfe6;
border-radius: 50%;
vertical-align: bottom;
&:after{
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #409eff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(0);
transition: transform .15s ease-in;
}
}
.r-checked{
&:after{
transform: translate(-50%,-50%) scale(1);
}
}
.vertic-show-way{
display: block;
padding: 10px;
}
}
}