精华内容
下载资源
问答
  • 首先,来看一下单选框样式: <div class="option" v-for="(option, ind) in item.surveyQuestionOptionList" :key="ind"> <input :value="option.selectid" type="radio" :id="'option' + item.qid ...

    首先,来看一下单选框的样式:
    在这里插入图片描述

    <div class="option" v-for="(option, ind) in item.surveyQuestionOptionList" :key="ind">
    	<input :value="option.selectid" type="radio" :id="'option' + item.qid + option.selectid" :name="item.qid" :checked="ind == 0">
    	<label :for="'option' + item.qid + option.selectid">{{option.selection}}</label>
    </div>
    
    input[type="radio"] + label{
      position: relative;
      padding-left: 1.5rem;
      padding-right: 1rem;
      width: 100%;
    }
    input[type="radio"] + label span{
      white-space: pre-wrap;
    }
    input[type="radio"] + label::after,
    input[type="radio"] + label::before {
      /* content: "\a0"; 不换行空格 */
      content:"";
      display: inline-block;
      vertical-align: middle;
      width: 0.6rem;
      height: 0.6rem;
      margin-right: .4rem;
      border-radius: 50%;
      line-height: 1.2rem; 
      padding: 0.3rem;
      background: -webkit-linear-gradient(45deg, #fff, #e1e2e4); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(45deg, #fff, #e1e2e4); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(45deg, #fff, #e1e2e4); /* Firefox 3.6 - 15 */
      background: linear-gradient(45deg, #fff, #e1e2e4);
      left: 0;
      top:0.2rem;
      position: absolute;
    }
    input[type="radio"]:checked + label::before {
        background: #7a4010;
        background-clip: content-box;
        padding: 0.3rem;
        z-index: 9;
    }
    input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
    

    在中间遇到的问题:
    默认选中
         直接在input标签上加入:checked="ind == num"num为你要默认选中的索引,但加上之后还是没有选中,后来发现是v-model的原因,你把v-model去掉,checked就有效果了

    v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

    取值问题
         在vue中,当然要用它自带的双向绑定,那么问题来了,在
    中,我们为了默认选中吧v-model去掉了,可以采用点击事件获取选中的值,但是如果在题目数量不确定的时候,你获取值,再改变值就变得比较复杂,于是我的目光又回到了v-model身上,仔细想一下上面引用,那我们的checked也用v-model好了

     <input :value="option.selectid" v-model="answerList.answers[index].answer" type="radio" :id="'option' + item.qid + option.selectid" :name="item.qid">
     // 解决问题的代码
    
    展开全文
  • 好看的单选框样式

    2018-03-02 18:09:29
    好看的单选框样式,好看的单选框样式,好看的单选框样式,好看的单选框样式,好看的单选框样式
  • 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;
    }

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

    展开全文
  • 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;
        }
    
    展开全文
  • input单选框移动端样式

    千次阅读 2019-04-13 09:45:35
    input单选框 sex 男 女 提交 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019041309424997.png)

    input单选框

    css代码

    		#con{
    			overflow: hidden;
    			width: 220px;
    			position: relative;
    		}
    		.nan,
    		.nv{
    			width: 100px;
    			height: 60px;
    			background: #e3e3e3;
    			display: block;
    			float: left;
    			text-align: center;
    			line-height: 60px;
    			font-size: 20px;
    			color: white;
    			font-weight: 700;
    		}
    		#nan,
    		#nv{
    			display: none;
    		}
    		.active{
    			background: blue;
    		}
    

    HTML代码

    	<div id="con">
    		<label for="nan" class="nan">男</label>
    		<input type="radio" name="sex" id="nan" value="1" />
    		<label for="nv" class="nv">女</label>
    		<input type="radio" name="sex" id="nv" value="0" />
    	</div>
    	<button class="btn">
    		提交
    	</button>
    

    js代码

    <script type="text/javascript">
    	$('.btn').click(function(){
    		var obj = {
    		sex:$("#con input[type=radio]:checked").val()
    		}
    		console.log($("#con input[type=radio]:checked").val())
    	})
    	$('#con label').click(function(){
    		$(this).addClass('active').siblings().removeClass('active')
    	})
    </script>
    

    在这里插入图片描述

    展开全文
  • ionic 单选框设计样式

    千次阅读 2016-05-25 09:31:36
    单选框 单选框 单选1 单选2 单选3 单选4 单选5
  • 修改单选框样式

    千次阅读 2019-01-15 09:56:59
    单选框的圆的样式可以修改。其实就是一个新的样式将原来的覆盖掉,而不是真正的修改了原来的默认样式。 下来上代码 css的 .inputt input[type=radio]+label, inputtt input[type=radio]+label{ ...
  • 更改radio单选框图标样式

    千次阅读 2018-11-30 20:00:15
    并利用图标glyphicon代替radio单选框原有的“圆点”选择区 &lt;div class="container body-content"&gt; &lt;div class="row"&gt; &lt;div class="text-center ...
  • 单选框样式示例

    2019-02-20 18:04:50
    单选框样式示例
  • iphone单选框复选框样式是一款jquery click事件制作iphone风格的单选框样式复选框样式。
  • h5 编辑单选框样式

    2019-10-04 22:30:59
    radio单选框样式设置 input[type=radio] { display: inline-block; vertical-align: middle; width: 20px; height: 20px; -webkit-appearance: none; background-color: transparent; ...
  • ListViewRadioBtnDemo自定义单选框样式
  • 怎么修改Ext单选框原生的样式,变成这种样子![图片说明](https://img-ask.csdn.net/upload/201805/16/1526440770_224978.png)
  • html单选框默认样式比较单一,结合网上相关内容在此做个关于修改radio样式的记录。 html结构如下: <input type="radio" name="zoom" id="zoom1" value="enlarge" checked /> <label for="zoom1">放大&...
  • 小程序单选按钮样式
  • 一款单选框radio样式

    千次阅读 2015-12-10 09:57:24
    <!... <title></title> .radio-btn { width: 20px; height: 20px;... background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, ...样式效果如下:
  • 纯css3单选框美化样式

    千次阅读 2018-07-16 18:03:24
    &lt;div class="select_btn"&gt; &lt;input type="checkbox" id="checkbox_meihua" class="checkbox_style" name="select" value="...
  • iphone单选框复选框样式是一款jquery click事件制作iphone风格的单选框样式复选框样式。
  • layUI修改多选选中样式的颜色 1.原来的layui多选选中以后是绿色的 2.我们F12找到该复选的 i 标签,然后修改掉默认的改为你需要的颜色 3.这里我们在我们的css文件里加上下面代码,用 !important 替换掉以前的 ...
  • 修改默认单选框样式 适用于所有浏览器 包括IE8+ 功能和单选框的功能相同!后台可读取checked属性
  • 这是一组好看的炫酷的单选框。一套的表单样式能让表单好看漂亮。动态选择。
  • layui修改单选框样式

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

    2014-05-29 11:08:41
    好看的单选框和复选框样式,导入js文件就可以使用,超级方便
  • html把单选框改变样式

    千次阅读 2019-06-01 00:56:47
    /*行高不单位,子元素将继承数字乘以自身字体尺寸而非父元素行高*/ } input[type="radio"]:checked + label::before { content : "\2713" ; background-color : yellowgreen ; } ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,473
精华内容 19,389
关键字:

给单选框加样式