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我是radio我是另一个radio
截图如下:
附录: 第一个例子是用vue的一个方法,添加active ,然后,对这个有active的 元素下的子元素进行css描述。这个给当前元素添加class的方法解释,请挪步至另一篇笔记:
https://www.cnblogs.com/adouwt/p/7911639.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。