东莞贸易网站建设,山东网站制作哪家好,wordpress 用户水印,网站开发哪便宜这是接着上一篇纯css自定义复选框checkbox的第二篇#xff0c;自定义一个radio单选按钮#xff0c;同样#xff0c;采用css伪类和“”css选择器为思路#xff0c;下面是预览图#xff1a; 下面直入主题放代码#xff1a;HTML部分 !--两个name相同的radio--
i…这是接着上一篇纯css自定义复选框checkbox的第二篇自定义一个radio单选按钮同样采用css伪类和“”css选择器为思路下面是预览图 下面直入主题放代码HTML部分 !--两个name相同的radio--
input typeradio idmy_radio1 classmy_radio namemy_radiolabel formy_radio1单选Radio1/label
br /
input typeradio idmy_radio2 classmy_radio namemy_radio
label formy_radio2单选Radio2/label HTML代码没什么说的就是普通的label和input,定义相同的name即可。 下面为CSS部分 /*radio单选主要样式*/
.my_radio{opacity: 0;}
.my_radiolabel::before {content: ;display: block;width: 16px;height: 16px;border-radius: 100%;border: 1px solid #d9d9d9;position: absolute;top: 3px;left: -24px;box-sizing: border-box;
}.my_radio:hoverlabel::before {-webkit-transition: all .3s;transition: all .3s;border-color: #1890ff
}.my_radio:checkedlabel::after {content: ;display: block;width: 8px;height: 8px;border-radius: 100%;background-color: #1890ff;position: absolute;top: 7px;left: -20px;border-color: #1890ff;-webkit-transition: all .3s;transition: all .3s;
} 四行css第二行为radio最外层的圆圈,第四行为radio最里面选中时的实心圆。第三行为radio hover时的效果。其他样式自己可根据需要修改。 转载于:https://www.cnblogs.com/websharehome/p/9622090.html
