css 模拟radio的样式
本文共 972 字，大约阅读时间需要 3 分钟。
1、input 默认的 type 为 radio的样式，在具体场合中的改造
默认的样式这样：
但是我要这样的：
这样看来是不是比原来的好看多了。
2、优化radio的样式
{ {val}} 这个是vue的一个例子，点击一个元素给它追加一个class。当然这个不是重点，重点是 红色部分，我们需要对红色部分进行css描述。
.select-wrapper { display: inline-block; height: 16px; width: 16px; background-color: #fff; border: 1px solid #d4a668; border-radius: 100%; margin-right: 10px; margin-top: -1px; vertical-align: middle; line-height: 1; } 然后对这个添加一个伪类
.answer-item-wrapper.active .select-wrapper::after { content: ""; display: inline-block; height: 12px; margin: 2px; width: 12px; background-color: #cd9a51; border-radius: 100%; }
OK 这样的 话， 就可以实现了radio这样按钮的格式。
3、直接对input的一种改造
具体见完整demo,参考另外一个同学的写法
Document 我是radio
截图如下：
附录： 第一个例子是用vue的一个方法，添加active ，然后，对这个有active的 元素下的子元素进行css描述。这个给当前元素添加class的方法解释，请挪步至另一篇笔记：
转载地址：http://vhacl.baihongyu.com/
你可能感兴趣的文章
【leetcode】1023. Binary String With Substrings Representing 1 To N
查看>>
【leetcode】All Paths From Source to Target
查看>>
大师速写作品及理论，有你喜欢的知识
查看>>
iOS开发中的地图开发
查看>>
8. 国际化
查看>>
PHP设计模式：类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置...
查看>>
聊聊Mysql索引和redis跳表
查看>>
js数值计算精度再次入坑
查看>>
iOS 快速注释工具VVDocumenter-加强版支持Xcode 7
查看>>
Arduino语音天气预报（三）
查看>>
微信小程序中页面间跳转传参方式
查看>>
【Delphi】Base64加解密模块
查看>>
买卖股票的最佳时机 II
查看>>
导入Alamofire
查看>>
RPA、AI、BPO、IT系统，你PICK谁？ 如何选择提升业务效率的工具？
查看>>
SQL 中的常用函数及使用
查看>>
Windows10状态栏右下角的上升三角号没有了
查看>>
VMware无法连接MKS:套接字连接尝试次数太多解决
查看>>
输入框状态禁止enter键提交表单
查看>>
Spring Boot Environment的初始化和预处理
查看>>