精华内容
下载资源
问答
  • 单选框样式

    2019-11-20 17:01:20
    // 单选框样式 input.radio-type[type=“radio”]{ width: 20px; height: 20px; -webkit-appearance: none; position: relative; &:before { content: ‘’; width: 18px; height: 18px; border: 1px solid #ffa...

    // 单选框样式
    input.radio-type[type=“radio”]{
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    position: relative;
    &:before {
    content: ‘’;
    width: 18px;
    height: 18px;
    border: 1px solid #ffa900;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    }
    &:checked {
    background: unset;
    &:before {
    content: ‘’;
    width: 18px;
    height: 18px;
    border: 1px solid #ffa900;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    }
    &:after {
    content: ‘’;
    width: 10px;
    height: 10px;
    text-align: center;
    background: #ffa900;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 6px;
    left: 4px;
    }
    }
    }

    展开全文
  • 好看的单选框样式

    2018-03-02 18:09:29
    好看的单选框样式,好看的单选框样式,好看的单选框样式,好看的单选框样式,好看的单选框样式
  • ListViewRadioBtnDemo自定义单选框样式
  • 单选框样式示例

    2019-02-20 18:04:50
    单选框样式示例
                   

     HTML+CSS  多选、单选框样式示例

    1.使用clip:rect():
    <body>
    this is a checkbox
    <input type="checkbox" style="position:absolute;clip:rect(5,14,14,5);background:red" id="myCheckbox">
    <span style="position:absolute;border:solid 1px blue;width:9px;height:9px;left:expression(myCheckbox.offsetLeft+5);top:expression(myCheckbox.offsetTop+5)"><!-- --></span>
    </body>
    2.基本样式:
    <br>单选和复选按钮的背景是红色的<br>
    <input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000;border:1px dashed lime;">
    <input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"> 
    3.CSS样式:
    <style>....mycheckbox{...}{position:absolute;clip: rect(6 17 17 6);}</style>
    <input type=checkbox  class='mycheckbox'>&nbsp;&nbsp;&nbsp;&nbsp;this is a Checkbox

               

    再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

    展开全文
  • js使用li或者div来模拟input的复选框和单选框样式,7行代码,兼容好

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox"><input type="radio">的默认样式进行修改,但发现,并没有可以重置效果的方法,之前用过-webkit-appearance的方法,但是这个只在webkit内核的浏览器里面生效,火狐不生效。
    所以自己写了个js,用li来模拟复选框和单选框的效果,很简单,7行就行。

    效果图:
    这里写图片描述

    涉及到的知识点:自定义属性来存储点击状态和原来的class名

    html内容:

    <div id="box">
        <p>你最喜欢的运动</p>
        <ul>
            <li>爬山</li>
            <li>骑车</li>
            <li>游泳</li>
            <li class='hong'>篮球</li>
            <li class='hong'>足球</li>
            <li>羽毛球</li>
            <li>跳绳</li>
            <li>跑步</li>
        </ul>
    </div>

    js内容:
    注释比较多,是为了说明清楚,可能有点乱,能看懂的可以把注释删掉

    var aLi = document.querySelectorAll('#box ul li');  /*获取所有的li,如果要用class获取,可写成document.querySelectorAll('.class')*/
    for (var i=0;i<aLi.length;i++ )
    {
        aLi[i].ifCheck = false;                        /*自定义属性用来表示有没有被选中,初始化设置成false,未选中*/
        aLi[i].nowClass = aLi[i].className;            /*自定义属性用来存储最初的className,例如html内容里的class名,hong,这样在后面添加on的class名之后,不会导致原来的class名直接被覆盖*/
        aLi[i].onclick = function(){
             if(this.ifCheck){                         /*当点击当前li时,如果ifCheck是已经被选中状态*/
                this.className = this.nowClass         /*则让当前点击的li的class名等于最初的名字,也就是说把选中的on的class名去掉*/
        }else{
                this.className += ' on'                /*如果是未选中状态,则加上on,表示被选中*/
                }                                      /*可写成三目样式 this.className = this.ifCheck?this.nowClass:this.className+' on';*/
            this.ifCheck = !this.ifCheck;              /*一开始未选中,点击之后变成选中,不然相反,所以要给ifCheck的属性取反*/
        };
    };

    css样式:

    #box{
        width:600px;
        margin:50px auto;
    }
    #box p{
        font-size:14px;
        font-weight:bold;
        border-bottom:1px dashed #000;
        line-height:30px;
    }
    #box ul{
        margin-top:10px;
        overflow:hidden;
    }
    #box ul li{
        width:67px;
        height:20px;
        float:left;
        background-image:url(images/ck.png);  /*未选中时候的背景图*/
        background-repeat:no-repeat;
        font-size:12px;
        line-height:20px;
        text-indent:30px;
        margin-right:8px;
        cursor:pointer;
    }
    #box ul li.on{
        background-image:url(images/cked.jpg);   /*选中时候的背景图*/
    }
    #box ul li.hong{
        color:red;
    }

    本博客原创文章,若要转载,请注明出处
    有问题或者有错误的地方,可以留言,咱们讨论一下

    展开全文
  • 修改默认单选框样式 适用于所有浏览器 包括IE8+ 功能和单选框的功能相同!后台可读取checked属性
  • 2、利用label:before 在label的前面加一个元素来模拟单选框样式。 3、利用:checked css选择器将选中的单选框单独设置样式。 4、具体样式自根据项目手动设置比较灵活。 代码如下: <!--html--> <ul ...

    1、首先将原先的单选框隐藏掉。
    2、利用label:before 在label的前面加一个元素来模拟单选框的样式。
    3、利用:checked css选择器将选中的单选框单独设置样式。
    4、具体样式自根据项目手动设置比较灵活。
    代码如下:

    <!--html-->
     <ul class="pay_type">
              <li v-for="(item,i) in circleData.charges_type" :key="i">
                <input
                  :id="item.id"
                  class="radio"
                  type="radio"
                  name="radios"
                  :value="JSON.stringify(item)"
                  v-model="checkedValue"
                />
                <label
                  :for="item.id"
                >{{item.type}}</label>
                
              </li>
            </ul>
    
    //css
     > input {
          display: none;
        }
        > label {
          display: flex;
          align-items: center;
        }
        > input[type="radio"] + label:before {
          content: "";
          display: inline-block;
          width: 13px;
          height: 13px;
          padding: 3px;
          border: 1.5px solid #d7d7d7;
          border-radius: 50%;
          background: #f5f5f5;
          margin-right: 10px;
        }
        > input[type="radio"]:checked + label:before {
          content: "";
          border: 1.5px solid #ff4443;
          background: #ff4443 content-box;
        }
    
    展开全文
  • layui修改单选框样式

    2020-12-08 14:06:18
    layui修改单选框样式 /*修改单选框样式*/ .layui-form-radioed i { width: 20px;/*保证添加样式后可点击范围不变 与改前宽度一致*/ color: rgba(0,0,0,0);/*隐藏原样式*/ } /*修改后的样式 可替换其他样式 本例...
  • 自制单选框样式

    2018-07-11 01:37:59
    由于单选框的样式肯固定并且不太好看,今天教大家自制单选框样式:&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="...
  • 自定义input单选框样式

    千次阅读 2019-05-16 14:51:57
    自定义input单选框样式 表单中input[type=“radio”]的样式在不同的浏览器中表现也不一样,如果直接对单选按钮设置样式的话,没有多少样式能够对单选按钮起作用。 为了用户体验或者需要更改单选按钮的样式可使用此...
  • radio单选框样式设置 input[type=radio] { display: inline-block; vertical-align: middle; width: 20px; height: 20px; -webkit-appearance: none; background-color: transparent...
  • 改变input单选框样式(变成圆)

    千次阅读 2019-11-09 09:28:07
    改变input单选框样式(变成圆) 1.清空默认样式(最重要) outline: none 清空单选框,点击时蓝色默认边框 -webkit-appearance: none 清空单选框默认边框 1、-moz代表firefox浏览器私有属性 2、-ms代表ie浏览器私有...
  • 这是一组好看的炫酷的单选框。一套的表单样式能让表单好看漂亮。动态选择。
  • 自定义input[type=radio]单选框样式

    千次阅读 2017-01-17 16:49:38
    一般默认的input[type=radio]单选框样式都比较简陋,如何自定义自己喜欢的样式呢?下面来接单介绍一种。
  • 自定义单选框样式

    2018-05-07 14:18:54
    大多数情况下我们需要重新定义单选框样式,比如下图:html代码如下:&lt;div class="user-info-detail"&gt;  &lt;p&gt;  &lt;span class="item-name"&gt;性别&...
  • CSS自定义单选框样式

    2021-06-09 17:13:13
    CSS单选框 html: <!-- 刻字字体选择 --> <div class="font-selection"> <div class="title">{{ $t(`${lang}.FontSelect`) }}</div> <div class="radios"> <div class="single-...
  • 简单css美化复选框单选框样式方式

    千次阅读 2019-05-21 16:55:21
    纯css美化复选框单选框(通过添加修改背景图片实现) 原生的复选框单选框无法满足工作中的需求,更多是通过ui图决定复选框单选框样子,通过添加修改背景图片实现更加灵活,可修改性更强. 原始复选框单选框效果图: 背景图...
  • &lt;input type="checkbox" name="check"...1、需要取消单选框自身样式 .check { display: inline-block; vertical-align:middle; appearance: none; /* 取消自身块样式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,671
精华内容 668
关键字:

单选框样式