|
|
|
|
|
單選按鈕radio是表單常見(jiàn)的元素,但是默認(rèn)的單選按鈕radio樣式呆板不好看,因此通常設(shè)計(jì)人員會(huì)自己設(shè)計(jì)一個(gè)單選按鈕radio,本文介紹用純css3實(shí)現(xiàn)漂亮的單選按鈕radio。
純css3實(shí)現(xiàn)漂亮的單選按鈕radio
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #8f8f8f;
font-family: 'Lato', sans-serif;
}
.wrapper{
display: inline-flex;
background: #fff;
height: 80px; /* 按鈕盒子高度 */
width: 250px; /* 按鈕盒子寬度 */
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot{
height: 12px; /* radio 圓直徑 */
width: 12px; /* radio 圓直徑 */
background: #d9d9d9; /* radio 圓顏色(非checked) */
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before{
position: absolute;
content: "";
top: 2px; /* radio 小圓相對(duì)大圓的位置 */
left: 2px; /* radio 小圓相對(duì)大圓的位置 */
width: 8px; /* radio 小圓直徑 */
height: 8px; /* radio 小圓直徑 */
background: #c68419; /* radio 小圓顏色 */
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"]{
display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
border-color: #c68419; /* 按鈕顏色(checked) */
background: #c68419; /* 按鈕顏色(checked) */
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
background: #fff; /* radio 大圓顏色(checked) */
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
opacity: 1;
transform: scale(1);
}
.wrapper .option span{
font-size: 15px; /* 文字大小 */
color: #808080; /* 文字顏色(默認(rèn)) */
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
color: #fff; /* 文字顏色(checked) */
}
<div class="wrapper">
<input type="radio" name="select" id="option-1" checked>
<input type="radio" name="select" id="option-2">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>電信</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>聯(lián)通</span>
</label>
</div>
1、單選按鈕radio盒子寬度和高度
.wrapper{
display: inline-flex;
background: #fff;
height: 80px; /* 按鈕盒子高度 */
width: 250px; /* 按鈕盒子寬度 */
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
單選按鈕radio盒子寬度和高度
2、radio圓直徑,顏色
.wrapper .option .dot{
height: 12px; /* radio 圓直徑 */
width: 12px; /* radio 圓直徑 */
background: #d9d9d9; /* radio 圓顏色(非checked) */
border-radius: 50%;
position: relative;
}
radio圓直徑,顏色
3、radio按鈕顏色
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
border-color: #c68419; /* 按鈕顏色(checked) */
background: #c68419; /* 按鈕顏色(checked) */
}
radio按鈕顏色
4、radio大圓顏色,這里是白色 #fff
。
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
background: #fff; /* radio 大圓顏色(checked) */
}
radio大圓顏色(這里是白色 #fff)
5、radio小圓顏色、位置、大小設(shè)置
.wrapper .option .dot::before{
position: absolute;
content: "";
top: 2px; /* radio 小圓相對(duì)大圓的位置 */
left: 2px; /* radio 小圓相對(duì)大圓的位置 */
width: 8px; /* radio 小圓直徑 */
height: 8px; /* radio 小圓直徑 */
background: #c68419; /* radio 小圓顏色 */
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
小圓顏色與按鈕顏色一致,這里都是 #c68419
。
radio小圓顏色、位置、大小設(shè)置
6、文字大小及顏色設(shè)置
.wrapper .option span{
font-size: 15px; /* 文字大小 */
color: #808080; /* 文字顏色(默認(rèn)) */
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
color: #fff; /* 文字顏色(checked) */
}
文字大小及顏色設(shè)置