單選按鈕radio是表單常見的元素，但是默認的單選按鈕radio樣式呆板不好看，因此通常設計人員會自己設計一個單選按鈕radio，本文介紹用純css3實現漂亮的單選按鈕radio。

純css3實現漂亮的單選按鈕radio

CSS代碼

*{

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?小圓相對大圓的位置?*/

left:?2px;???????????????/*?radio?小圓相對大圓的位置?*/

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;??????????/*?文字顏色(默認)?*/

}

#option-1:checked:checked?~?.option-1?span,

#option-2:checked:checked?~?.option-2?span{

color:?#fff;?????????????/*?文字顏色(checked)?*/

}

HTML代碼

電信

聯通

代碼解釋

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小圓顏色、位置、大小設置

.wrapper?.option?.dot::before{

position:?absolute;

content:?"";

top:?2px;????????????????/*?radio?小圓相對大圓的位置?*/

left:?2px;???????????????/*?radio?小圓相對大圓的位置?*/

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小圓顏色、位置、大小設置

6、文字大小及顏色設置

.wrapper?.option?span{

font-size:?15px;?????????/*?文字大小?*/

color:?#808080;??????????/*?文字顏色(默認)?*/

}

#option-1:checked:checked?~?.option-1?span,

#option-2:checked:checked?~?.option-2?span{

color:?#fff;?????????????/*?文字顏色(checked)?*/

}

文字大小及顏色設置

相關文章

總結

以上是生活随笔為你收集整理的html漂亮的单选框,纯css3实现漂亮的单选按钮radio的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。