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