码迷,mamicode.com
首页 > Web开发 > 详细

css 模拟radio的样式

时间:2018-05-22 18:23:01      阅读:311      评论:0      收藏:0      [点我收藏+]

标签:ati   doctype   --   sel   tle   例子   targe   元素   inf   

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;
  }

  然后对这个添加一个伪类

.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>

  截图如下:

技术分享图片

 

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

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

 

css 模拟radio的样式

标签:ati   doctype   --   sel   tle   例子   targe   元素   inf   

原文地址:https://www.cnblogs.com/adouwt/p/9073203.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!