用css自定义radio样式

设计师眼中的页面总是充满美感的,但当一个充满美感的设计图放在程序员眼前时,情形会大为不同。我们会考虑,这个设计应该怎么实现,难度如何,等等等。在不断的撕逼中,我们尝试着以用户的角度去考虑问题。毕竟,他们高兴就好_

先看一下单选按钮的设计图:

我是美丽的单选按钮

之前尝试过直接用css对单选按钮进行修改,可是基本不可能修改为以上样式。于是,改用其他元素代替。当改用其他元素代替后,我们又会考虑一个问题。能否继续使用原生radio的选中逻辑?或者用js来模拟选中逻辑?就这样,样式的问题扩展为一个比较复杂的交互处理问题。但是,我们的原则是,能用简单的方式就绝对不用复杂的方式。在css3选择器的帮助下,我们确实可以只用css实现上述效果。

页面dom结构

<label class="m-check ui-margin">
     <input type="radio" name="remindType" value="2" v-model="remind"/>
     <div class="m-radio ui-pos"></div>
     <span>天</span>
</label>

整个结构包含在label标签里,以扩大radio的选中范围。虽然在用一个div来模拟radio的样式,但是仍然需要input来帮忙实现选中时的样式效果,而重点也就在这里。

css代码

.ui-middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.m-radio{
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    border: solid 1px #ccc;
    border-radius: 50%;
    cursor: pointer;
    }
.m-radio:after{
    .ui-middle;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
}
.m-check{
    display: inline-block;
}
.m-check input[type="radio"]{
    display: none;
}
.m-check input[type="radio"]:checked + div{
    border:solid 2px #60A3F5;
}
.m-check input[type="radio"]:checked + div:after{
    background-color: #60A3F5;
}

首先,将input标签隐藏,然后将div标签的样式修改为设计图中的按钮样式,其中的实心点,则用伪元素实现,并让伪元素在父元素中绝对居中。

接下来是选中逻辑的实现,当点击label标签时,隐藏的input标签被选中,其状态发生改变。状态用伪类选择器选中。这个时候,用兄弟选择器选中的div的样式发生改变,就实现了选中效果。

总结:为了让隐藏的input标签被选中,使用label将其包裹。用伪类选择器和相邻元素选择器实现div样式的修改。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,359评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,082评论 19 139
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,645评论 32 459
  • 随着十一月的最后一天的到来,我可以骄傲的宣布,这个月的写作打卡我坚持下来了,没有请假一次。 这个月收获颇丰。 第一...
    佳佳的宝瓶子阅读 367评论 0 0