css 模拟radio的样式-阿里云开发者社区

css 模拟radio的样式

2018-05-22 1490

简介： 1、input 默认的 type 为 radio的样式，在具体场合中的改造默认的样式这样：但是我要这样的：这样看来是不是比原来的好看多了。 2、优化radio的样式 {{val}} 　这个是vue的一个例子，点击一个元素给它追加一个class。

+关注继续查看

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

默认的样式这样：

但是我要这样的：

这样看来是不是比原来的好看多了。

2、优化radio的样式

<span class="answer-item-wrapper" :class="{ active: chooseNum === index }" @click="selectItem(index)">
   <span class="select-wrapper">
   </span>
   <span class="select-content">
     {{val}}
   </span>
</span>

　这个是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,参考另外一个同学的写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    .demo--label{margin:20px 20px 0 0;display:inline-block}
    .demo--radio{display:none}
    .demo--radioInput{background-color:#fff;border:1px solid #cd9a51;border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1}
    .demo--radio:checked + .demo--radioInput:after{background-color:#cd9a51;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
    .demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
  </style>
</head>
<body>
  <div>
    <input  type="radio" name="demo-radio"> 我是radio
    <div></div>
    <label class="demo--label">
        <input class="demo--radio" type="radio" name="demo-radio">
        <span class="demo--radioInput"></span>我是radio
    </label>
    <div></div>
    <label class="demo--label">
        <input class="demo--radio" type="radio" name="demo-radio">
        <span class="demo--radioInput"></span>我是另一个radio
    </label>
</div>
</body>
</html>

　　截图如下：