css 模拟radio的样式

1、input 默认的 type 为 radio的样式,在具体场合中的改造

默认的样式这样:

css 模拟radio的样式

但是我要这样的:

css 模拟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

  截图如下:

css 模拟radio的样式

 

 附录: 第一个例子是用vue的一个方法,添加active ,然后,对这个有active的 元素下的子元素进行css描述。这个给当前元素添加class的方法解释,请挪步至另一篇笔记:

https://www.cnblogs.com/adouwt/p/7911639.html

 

上一篇:day23 1. 函数对象 2.函数嵌套 3.名称空间与作用域 4.闭包函数


下一篇:MP update不存在的数据返回值一定为零?