改变input tpye 属性radio css 样式！！！

灰太狼 2022-01-10 05:25 334阅读 0赞

// html部分
    <div class="Report_for_right">
      <input type="radio" name="Report_radio">
      <label></label>
    </div>
    //css

.Report_for_right{
       
      float: right;
      position: relative;
      input{
       
        z-index: 100;
      }
      input[type="radio"] {
       
        /*width: 40px;*/
        // 这里把默认的圆点透明度设置为0，并且把 label 标签的层级设置成高于默认的radio层级
        opacity: 0;
        z-index: 100!important;
        height: 20px;
      }
      label {
       
        position: absolute;
        right: 10px;
        top:12px;
        border: 1px solid #ddd;
        width: 15px;
        height: 15px;
        text-align: center;
        // 点击显示成绿色部分，其实是radio的部分，只不过对radio进行了透明处理而已。
        z-index:1;
        /**/
        border-radius: 50px;
        color: #333;
      }
      input:checked+label {
       
        background-color: #ff6160;
        border-radius: 50px;
        color: white;
      }
    }
    
    
    
    
    注释：如有错误！请留言

转载于:https://www.cnblogs.com/Liu-yz/p/10820280.html

发表评论取消回复

表情：

评论列表（有 0 条评论，334人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp改变radio大小-属性transform: scale()

半年前使用uniapp+ColorUI+安卓写了一款app，最近在进行一些优化和修改，顺便记录一下遇到的一些小问题，遇到的一些可以记录下来的优化点，其实uniapp用来做一些比

秒速五厘米/ 2023年01月09日 03:53/ 0 赞/ 195 阅读

相关 CSS Radio、Texteare样式问题总结

1、input、texteare placeholder字体颜色大小设置 input::-webkit-input-placeholder {

朱雀/ 2022年11月14日 11:58/ 0 赞/ 435 阅读

相关 css改变鼠标样式

元素的样式上加cursor:值 <table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <t

蔚落/ 2022年09月16日 04:56/ 0 赞/ 353 阅读

相关 css修改radio、checkbox默认样式

> 为radio类型的input标签添加类名aui-radio，如下 ![0b22aa3cc73441feb246bb914f2aa713.png][] 然后引入

本是古典何须时尚/ 2022年09月16日 01:27/ 0 赞/ 317 阅读

相关自定义input type=”radio”样式

html： <input type="radio" name="sex" value="man" id="man" checked> <lab

待我称王封你为后i/ 2022年06月02日 00:38/ 0 赞/ 211 阅读

相关 input radio 自定义css样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

向右看齐/ 2022年05月15日 00:22/ 0 赞/ 316 阅读

相关 input radio,改装input单选框样式，单选框input修改默认样式

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

缺乏、安全感/ 2022年04月08日 15:29/ 0 赞/ 419 阅读

相关改变input tpye 属性radio css 样式！！！

// html部分 <div class="Report_for_right"> <input type="radio" name="Report_

灰太狼/ 2022年01月10日 05:25/ 0 赞/ 335 阅读

相关改变radio默认样式

.html <div class="choose"> <p class="option"><label class="radio"><span cla

小鱼儿/ 2021年09月13日 15:58/ 0 赞/ 527 阅读

相关改变单选radio样式

<label class="checkbox-container"> <input type="radio" value="影视" name="in

偏执的太偏执、/ 2021年09月10日 07:02/ 0 赞/ 539 阅读