css 单选按钮样式

最新推荐文章于 2024-08-23 13:30:11 发布

淺笑輕吟夢壹曲

最新推荐文章于 2024-08-23 13:30:11 发布

阅读量646

点赞数

分类专栏： css应用

原文链接：https://blog.csdn.net/shiLL123/article/details/79772849

版权

css应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

改变单选按钮radio的默认样式

html

<div class="choice">  
    <label class="radio">在校生<input type="radio" name="radio" value="1" checked><i></i></label>  
    <label class="radio">非在校生<input type="radio" value="2" name="radio"><i></i></label>  
</div>

css样式

.choice{  
    position: relative;  
}  
.choice .radio{  
    position: relative;  
    display: inline-block;  
    font-weight: 400;  
    color: #0c4757;  
    padding-left: 25px;  
    cursor: pointer;  
}  
.choice .radio input{  
    position: absolute;  
    left: -9999px;  
}  
.choice .radio i{  
    display: block;  
    position: absolute;  
    top: 6px;  
    left: 0;  
    width: 15px;  
    height: 15px;  
    outline: 0;  
    border: 1px solid #47a8c0;  
    background: #9cd9e8;  
    border-radius: 50%;  
    transition: border-color .3s  
    -webkit-transition: border-color .3s;  
}  
.choice .radio input:checked+i{  
    border-color: #0c4757;  
}  
.choice .radio input+i:after{  
    position: absolute;  
    content: '';  
    top: 3px;  
    left: 3px;  
    width: 9px;  
    height: 9px;  
    border-radius: 50%;  
    background-color: #47a8c0;  
    opacity: 0;  
    transition: opacity .1s;  
    -webkit-transition: opacity .1s;  
}  
.choice .radio input:checked+i:after{  
    opacity: 1;  
}