css 模拟radio的样式

小编 2026-06-12 阅读:202 评论:0

1、input 默认的 type 为 radio的样式，在具体场合中的改造默认的样式这样：但是我...

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

默认的样式这样：

css 模拟radio的样式

但是我要这样的：

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

　　截图如下：

css 模拟radio的样式