简单重写类型为radio的input元素
简单重写类型为radio的input元素
闫亚亚 发表于1年前
简单重写类型为radio的input元素
  • 发表于 1年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

radio类型

很容易理解有选中前的样式和选中后的样式,选中前的样式很好选择,选中后的样式可以用:check这个伪类选择器选中。(多浏览器支持我还没完全掌握,目前只用webkit内核浏览器来说) 
然后先用-webkit-appearance:none;关闭浏览器自带样式,然后要做成选中前是一个空心圆,选中后是一个中间有个实心点的圆。(可以理解为在谷歌浏览器上自带的radio样式) 

空心圆可以使用圆角+背景色+阴影来表示:

<代入你的选择器>{
    -webkit-appearance:none;
    height: 13px;
    width: 13px;
    background-color: rgb(227,227,227);
    box-shadow: 0 0 1px rgb(104,104,104);
    border-radius: 10px;
    outline: none;/*似乎谷歌浏览器还有一个蓝色的outline影响,于是去掉*/
} 

从样式可以看出来这个空心圆的直径是13px,阴影是1px,内部空心是5.5px。(然而查看控制台并不是这样的,我也不知道为何…) 
于是乎,选中后的圆应该也不能超过这个尺寸,而且深色圆点作为选中的圆点,厚border作为空心部分,最外层就要用到box-shadow属性来保证跟未选中时近似。

<代入你的选择器>:checked{
    background-color: rgb(104,104,104);
    border: 3px solid rgb(227,227,227);
    box-shadow: 0 0 1px rgb(104,104,104);
}

 

共有 人打赏支持
粉丝 1
博文 57
码字总数 17970
×
闫亚亚
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: