0
点赞
收藏
分享

微信扫一扫

自定义input[type=

火热如冰 2022-05-27 阅读 139

自定义input[type=_css

<html>

<body style="margin:100px">


<div class="female">


    <input type="radio" id="female" name="sex" />


    <label for="female">女</label>


</div>


<br/>


<div class="male">                


    <input type="radio" id="male" name="sex" />


    <label for="male">男</label>


</div>




<style type="text/css">


*{margin: 0px;padding: 0px;}


    input[type="radio"] + label::before {


    content: "\a0"; /*不换行空格*/


    display: inline-block;


    vertical-align: middle;


    font-size: 18px;


    width: 1em;


    height: 1em;


    margin-right: .4em;


    border-radius: 50%;


    border: 1px solid #01cd78;


    text-indent: .15em;


    line-height: 1; 


      padding: .2em;


}




input[type="radio"]:checked + label::before {


    background-color: #01cd78;


    background-clip: content-box;


    padding: .2em;


}




input[type="radio"] {


    position: absolute;


    clip: rect(0, 0, 0, 0);


}


</style>


 


 


</body>


</html>


举报

相关推荐

0 条评论