静态radio

最新推荐文章于 2020-06-26 15:37:29 发布
最新推荐文章于 2020-06-26 15:37:29 发布
阅读量204 收藏
点赞数
分类专栏： css Html5 文章标签： html css radio 美化 radio美化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zshsats/article/details/88561872
版权
css 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
Html5
4 篇文章 0 订阅
订阅专栏

静态的,没有添加js效果,可以封装
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_570150_3p5eimweh1q.css">
    <style>
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <link rel="stylesheet/less" type="text/css" href="./radio.less"/>
    <script src="../assets/less.min.js" type="text/javascript"></script>
</head>
<body>
<h3>单选框</h3>
<div class="single-way-one">
    <p>方式一:</p>
    <span class="r-single">
         <span class="r-show-radio r-checked">
            <input type="radio" class="r-hide-input">
         </span>
        <span class="r-s-text">
            选项一
        </span>
    </span>
    <span class="r-single ml15">
         <span class="r-show-radio">
            <input type="radio" class="r-hide-input">
         </span>
        <span class="r-s-text">
            选项一
        </span>
    </span>
</div>
<div class="single-way-two">
    <p>方式二:</p>
    <span class="r-single">
         <span class="r-show-radio r-checked">
            <input type="radio" class="r-hide-input">
         </span>
        <span class="r-s-text">
            选项一
        </span>
    </span>
    <span class="r-single ml15">
         <span class="r-show-radio">
            <input type="radio" class="r-hide-input">
         </span>
        <span class="r-s-text">
            选项一
        </span>
    </span>
</div>
<div class="single-way-three">
    <p>方式三:</p>
    <span class="r-single-button">
        <span class="r-single">
             <span class="r-show-radio r-checked">
                <input type="radio" class="r-hide-input">
             </span>
            <span class="r-s-text">
                选项一
            </span>
        </span>
    </span>
    <span class="r-single-button">
        <span class="r-single">
             <span class="r-show-radio">
                <input type="radio" class="r-hide-input">
             </span>
            <span class="r-s-text">
                选项一
            </span>
        </span>
    </span>
</div>
<div class="single-way-four">
    <p>方式四:</p>
    <span class="r-single r-checked">
        <input type="radio" class="r-hide-input">
        <span class="r-show-text">选项一</span>
    </span>
    <span class="r-single">
        <input type="radio" class="r-hide-input">
        <span class="r-show-text">选项二</span>
    </span>
</div>

<div class="horize-way">
    <h3>横向组:</h3>
    <p>方式一:</p>
    <div class="horize-group-one">
        <span class="r-single">
             <span class="r-show-radio r-checked">
                <input type="radio" class="r-hide-input">
             </span>
             <span class="r-s-text">
                选项一
             </span>
        </span>
        <span class="r-single">
             <span class="r-show-radio">
                <input type="radio" class="r-hide-input">
             </span>
             <span class="r-s-text">
                选项一
             </span>
        </span>
        <span class="r-single">
            <span class="r-show-radio">
                <input type="radio" class="r-hide-input">
            </span>
            <span class="r-s-text">
                选项一
            </span>
        </span>
        <span class="r-single">
             <span class="r-show-radio">
                <input type="radio" class="r-hide-input">
             </span>
             <span class="r-s-text">
                选项一
             </span>
        </span>
    </div>
    <p>方式二:</p>
    <div class="horize-group-two">
        <span class="r-single-button">
             <span class="r-single">
                 <span class="r-show-radio r-checked">
                    <input type="radio" class="r-hide-input">
                 </span>
                 <span class="r-s-text">
                    选项一
                 </span>
             </span>
         </span>
        <span class="r-single-button">
             <span class="r-single">
                 <span class="r-show-radio">
                    <input type="radio" class="r-hide-input">
                 </span>
                 <span class="r-s-text">
                    选项一
                 </span>
             </span>
         </span>
        <span class="r-single-button">
             <span class="r-single">
                 <span class="r-show-radio">
                    <input type="radio" class="r-hide-input">
                 </span>
                 <span class="r-s-text">
                    选项一
                 </span>
             </span>
         </span>
        <span class="r-single-button">
             <span class="r-single">
                 <span class="r-show-radio">
                    <input type="radio" class="r-hide-input">
                 </span>
                 <span class="r-s-text">
                    选项一
                 </span>
             </span>
         </span>
    </div>
    <p>方式三:</p>
    <div class="horize-group-three">
        <span class="r-single r-checked">
            <input type="radio" class="r-hide-input">
            <span class="r-show-text">选项一</span>
        </span>
        <span class="r-single">
            <input type="radio" class="r-hide-input">
            <span class="r-show-text">选项一</span>
        </span>
        <span class="r-single">
            <input type="radio" class="r-hide-input">
            <span class="r-show-text">选项一</span>
        </span>
        <span class="r-single">
            <input type="radio" class="r-hide-input">
            <span class="r-show-text">选项一</span>
        </span>
    </div>
</div>
<div class="vertical-way">
    <h3>纵向选择</h3>
    <p>方式一:</p>
    <div class="vertic-group-one">
         <span class="r-single vertic-show-way">
             <span class="r-show-radio r-checked">
                <input type="radio" class="r-hide-input">
             </span>
            <span class="r-s-text">
                选项一
            </span>
         </span>
         <span class="r-single vertic-show-way">
             <span class="r-show-radio">
                <input type="radio" class="r-hide-input">
             </span>
            <span class="r-s-text">
                选项一
            </span>
         </span>
         <span class="r-single vertic-show-way">
             <span class="r-show-radio">
                <input type="radio" class="r-hide-input">
             </span>
            <span class="r-s-text">
                选项一
            </span>
         </span>
    </div>
</div>

</body>

</html>

.ml15{
  margin-left: 15px;
}
//单独一项radio
.single-way-one{
  .r-single{
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    .r-hide-input{
      opacity: 0;
      outline: none;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
    }
  }
  .r-show-radio{
    position: relative;
    display: inline-block;
    height: 16px;
    width: 16px;
    border: 1px solid #dcdfe6;
    border-radius: 50%;
    vertical-align: bottom;
    &:after{
      width: 4px;
      height: 4px;
      border-radius: 100%;
      background-color: #fff;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) scale(0);
      transition: transform .15s ease-in;
    }
  }
  .r-checked{
    background-color: #409eff;
    &:after{
      transform: translate(-50%,-50%) scale(1);
    }
  }
}


.single-way-two{
  .r-single{
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    .r-hide-input{
      opacity: 0;
      outline: none;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
    }
  }
  .r-show-radio{
    position: relative;
    display: inline-block;
    height: 16px;
    width: 16px;
    border: 1px solid #dcdfe6;
    border-radius: 50%;
    vertical-align: bottom;
    &:after{
      width: 8px;
      height: 8px;
      border-radius: 100%;
      background-color: #409eff;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) scale(0);
      transition: transform .15s ease-in;
    }
  }
  .r-checked{
    &:after{
      transform: translate(-50%,-50%) scale(1);
    }
  }
}


.single-way-three{
  .r-single-button{
    display: inline-block;
    color: #606266;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    padding: 10px 15px;

    .r-single{
      position: relative;
      cursor: pointer;
      display: inline-block;
      white-space: nowrap;
      font-size: 14px;
      .r-hide-input{
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
      }
    }
    .r-show-radio{
      position: relative;
      display: inline-block;
      height: 16px;
      width: 16px;
      border: 1px solid #dcdfe6;
      border-radius: 50%;
      vertical-align: bottom;
      &:after{
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: #409eff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(0);
        transition: transform .15s ease-in;
      }
    }
    .r-checked{
      &:after{
        transform: translate(-50%,-50%) scale(1);
      }
    }
  }

}
.single-way-four{
  .r-single{
    display: inline-block;
    text-align: center;
    border: #dcdfe6 solid 1px;
    height: 40px;
    padding:0 15px;
    line-height: 40px;
    color: #666666;
    overflow: hidden;
    position: relative;


  }
  .r-checked{
    &:before{
      content: '';
      display: block;
      width: 3px;
      height: 8px;
      border-right: #ffffff solid 2px;
      border-bottom: #ffffff solid 2px;
      transform: rotate(35deg);
      position: absolute;
      bottom: 2px;
      right: 4px;
      z-index: 2;
    }
    &:after{
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      background-color: #d51917;
      transform: skewY(-45deg);
      position: absolute;
      bottom: -10px;
      right: 0;
      z-index: 1;
    }
  }
  .r-hide-input{
    opacity: 0;
    outline: none;
    position: absolute;
    z-index: -1;
  }
  .r-show-text{
    font-size: 14px;
  }
}

//横向组radio
.horize-way{
  .horize-group-one{
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    .r-single+.r-single {
      margin-left: 30px;
    }
    .r-single{
      position: relative;
      cursor: pointer;
      display: inline-block;
      white-space: nowrap;
      font-size: 14px;
      .r-hide-input{
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
      }
    }
    .r-show-radio{
      position: relative;
      display: inline-block;
      height: 16px;
      width: 16px;
      border: 1px solid #dcdfe6;
      border-radius: 50%;
      vertical-align: bottom;
      &:after{
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: #fff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(0);
        transition: transform .15s ease-in;
      }
    }
    .r-checked{
      background-color: #409eff;
      &:after{
        transform: translate(-50%,-50%) scale(1);
      }
    }
  }
  .horize-group-two{
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    .r-single-button+.r-single-button{
       border-left: 0;
    }
    .r-single-button{
      display: inline-block;
      color: #606266;
      font-weight: 500;
      position: relative;
      cursor: pointer;
      white-space: nowrap;
      outline: none;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      padding: 10px 15px;

      .r-single{
        position: relative;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        font-size: 14px;
        .r-hide-input{
          opacity: 0;
          outline: none;
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: 0;
        }
      }
      .r-show-radio{
        position: relative;
        display: inline-block;
        height: 16px;
        width: 16px;
        border: 1px solid #dcdfe6;
        border-radius: 50%;
        vertical-align: bottom;
        &:after{
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background-color: #409eff;
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%) scale(0);
          transition: transform .15s ease-in;
        }
      }
      .r-checked{
        &:after{
          transform: translate(-50%,-50%) scale(1);
        }
      }
    }
  }

  .horize-group-three{
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    .r-single+.r-single{
      border-left: none;
    }
    .r-single{
      display: inline-block;
      text-align: center;
      border: #dcdfe6 solid 1px;
      height: 40px;
      padding:0 15px;
      line-height: 40px;
      color: #666666;
      overflow: hidden;
      position: relative;


    }
    .r-checked{
      &:before{
        content: '';
        display: block;
        width: 3px;
        height: 8px;
        border-right: #ffffff solid 2px;
        border-bottom: #ffffff solid 2px;
        transform: rotate(35deg);
        position: absolute;
        bottom: 2px;
        right: 4px;
        z-index: 2;
      }
      &:after{
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background-color: #d51917;
        transform: skewY(-45deg);
        position: absolute;
        bottom: -10px;
        right: 0;
        z-index: 1;
      }
    }
    .r-hide-input{
      opacity: 0;
      outline: none;
      position: absolute;
      z-index: -1;
    }
    .r-show-text{
      font-size: 14px;
    }
  }
}



//纵向组radio

.vertical-way{
  .vertic-group-one{

    .r-single{
      position: relative;
      cursor: pointer;
      display: inline-block;
      white-space: nowrap;
      font-size: 14px;
      .r-hide-input{
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
      }
    }
    .r-show-radio{
      position: relative;
      display: inline-block;
      height: 16px;
      width: 16px;
      border: 1px solid #dcdfe6;
      border-radius: 50%;
      vertical-align: bottom;
      &:after{
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: #409eff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(0);
        transition: transform .15s ease-in;
      }
    }
    .r-checked{
      &:after{
        transform: translate(-50%,-50%) scale(1);
      }
    }




    .vertic-show-way{
      display: block;
      padding: 10px;
    }
  }
}
优资园
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
crs.rar_cognitive radio
09-20
在传统的无线通信系统中，频谱资源通常是静态分配的，而认知无线电通过动态频谱接入（Dynamic Spectrum Access, DSA）来解决日益严重的频谱拥挤问题。 **基本概念** 1. **频谱感知（Spectrum Sensing）**：是认知...
如何制作移动端静态网页
weixin_42306249的博客
04-08 2960
开发移动端 兼容移动端主流浏览器，处理Webkit内核浏览器即可 移动端调试的方法 Chrome DevTools(谷歌浏览器)的模拟手机调试 搭建 本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问 开发准备 视口(viewport) 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。 布局视口：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题（iOS,Abdroid基本都将这个
HTML5系列代码：radio样式的表单
BLOG域名:programb.blog.csdn.net
06-26 1933
Radio 对象代表 HTML 表单中的单选按钮。 在 HTML 表单中 input type="radio"每出现一次，一个 Radio 对象就会被创建。 单选按钮是表示一组互斥选项按钮中的一个。 当一个按钮被选中，之前选中的按钮就变为非选中的。 当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。 您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。 <html> <h.
静态密码
幕色夜行
04-05 2649
静态密码
html:radio之五使用方法
Roger★L☆M☆J★
08-15 3876
 1．页面radio的加载：//  (1)引入所需的类 // (2)设置radio的值及对应名称  ArrayList empRoleList= new ArrayList();   empRoleList.add(new LabelValueBean("开发部普通员工", "10000001"));   empRoleList.add(new LabelValueBean
radio-app
03-16
9. **性能优化**：为了提供流畅的用户体验，"radio-app"可能会进行一系列性能优化，如延迟加载非关键资源，使用CDN加速静态资源的加载，优化图片大小等。 10. **测试与调试**：在开发过程中，单元测试、集成测试和...
Radio Space
10-28
GIF格式通常用于静态图像，它可能包含多种颜色和透明度，以便清晰地展示字体的细节和特点。 radiospace.TTF文件则是Radio Space字体的核心部分，它是TrueType字体格式的文件。TrueType是一种通用的字形标准，可在...
radio-reka
03-22
`public`目录通常包含静态资源，如图片、字体文件等；`node_modules`包含了所有通过npm安装的依赖；`package.json`文件记录了项目信息和依赖；`README.md`文件提供项目的基本介绍和使用指南。 总的来说，"radio-...
透明按钮Radio和CheckBox
10-25
处理Static控件的透明度与按钮类似，但需要注意的是，静态控件可能有SS_TRANSPARENT样式，这使得它们自动继承父窗口的背景。 在MFC中，为了保持代码的可读性和复用性，我们可以创建一个基类，比如CTransparentCtrl...
css中如何使图标的旋转
热门推荐
zshsats博客
10-21 1万+
css中如何使图标的旋转 例如： 使用的是阿里的icon &lt;i class="iconfont icon-xiangshangjiantou icon-select"&gt;&lt;/i&gt; //icon-xiangshangjiantou 向上的箭头 实现其旋转向下： 使用css3的transform属性 旋转180度 如下，是无效的： .icon-select{ trans...
CSS 文字样式,换行,省略
zshsats博客
09-01 1万+
常用的css : 字体: font-family: font-style:normal(正常)|italic(斜体)|oblique(倾斜) font-weight:normal(正常)|bold(粗体)|bolder(特粗体)|lighter(细体) 文本: word-spacing:normal | length 词与词之间的距离值,可以是负数 letter-spacing:no...
Html和Css中的空格
zshsats博客
09-04 3327
Html和Css中的空格 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css空格&lt;/title&gt; &lt;style&gt; .test1,.te
iview Select组件,文字没有居左的问题和Html空格问题
zshsats博客
07-06 3114
iview Select组件,文字没有居左的问题和Html,CSS空格问题 问题:文字没有在左边 原因:{{ item.label }}前有空格引起的 &amp;lt;Select v-model=&quot;seachdata.levelId&quot; filterable placeholder=&quot;选择级别&quot;&amp;gt; &amp;lt;Option v-for=&quot;item
兼容ie背景图片拉伸,实现图片填充
zshsats博客
04-27 2045
兼容ie背景图片拉伸 实现图片填充 兼容IE及所有浏览器的背景图片填充 background: url(../images/test01.png) no-repeat center; width: 96px; height: 60px; -moz-background-size: 100% 100%; -o-back...
H5,css3,Javascript,html,css等兼容性检测
zshsats博客
09-05 1974
兼容性检测 网址:https://caniuse.com/
深入line-height，中线，基线，底线，顶线
zshsats博客
04-30 1943
中线，基线，底线，顶线 属性值 对齐方式 baseline 元素基线与父元素基线对齐，默认值 bottom 元素底部与父元素底部对齐 top 元素顶部与父元素顶部对齐 middle 元素中线与父元素中线对齐 top 与父元素顶部对齐 text-top 元素顶部与父元素文字顶部对齐 text-bottom 元素顶部与父元素文字顶部对齐 ...
消除行内元素底部间隙
zshsats博客
04-30 666
消除行内元素底部留白 行内盒模型 消除行内元素底部间隙： 原理： middle对齐的是整个大盒子的行高中心位置往下偏移1/2字体的高度 &amp;lt;style&amp;gt; *{ margin: 0; padding: 0; } html,body{ height: 100%; } .div1{ di...
css 盒模型 和 css3 定义盒模型
zshsats博客
09-01 550
css 盒模型 标准盒模型 IE盒模型 box-sizing: //标准盒模型 -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; ...
帮我写一份html充值静态页面代码，格式如下
最新发布
05-25
<!... 充值中心 充值中心 ... <input type="radio" id="weixin" name="payment" value="weixin"> ... <input type="radio" id=...注：这是一个简单的静态页面，需要自己定义样式表（style.css）来美化页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值