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

    2018-09-30 15:05:46
    //选择售后类型 checkAftertype = (e) => { //待发货时为仅退款可选 let {typeChange, reasonChange, refund} = this.props; if ($(e.target).text() == "退货退款" &... ...
    //选择售后类型
    checkAftertype = (e) => {
        //待发货时为仅退款可选
        let {typeChange, reasonChange, refund} = this.props;
        if ($(e.target).text() == "退货退款" && refund == 1) {
            return;
        }
        //处理再次点击都变为请选择
        $(e.target).hasClass('current-yesround') ? null : reasonChange(0);
        $(e.target).addClass('current-yesround').siblings().removeClass('current-yesround');
        let type = $(e.target).attr('data-type');
        typeChange(type);
    };
    
    <div className="type-container">
        <div>售后类型</div>
        <div className="after-type">
            {afterType.map((item, i) => {
                return (
                    <i key={item.select} data-type={item.select} className="current-noround"
                       onClick={(e) => {
                           this.checkAftertype(e)
                       }}>
                        {item.method}
                    </i>
                )
            })}
        </div>
    </div>

    展开全文
  • 首先,来看一下单选框样式: <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">
     // 解决问题的代码
    
    展开全文
  • 1.radio自定义样式双层圆点效果复制代码width: 30rpx;height: 30rpx;display: inline-block;padding: 6rpx;border: 1px solid #2639a0;border-radius: 50%;background-color: #2639a0;background-clip: content-box;...

    1.radio自定义样式

    双层圆点效果

    9d631a13cea402e6a7ff38e7bf9bd4fa.png

    复制代码width: 30rpx;

    height: 30rpx;

    display: inline-block;

    padding: 6rpx;

    border: 1px solid #2639a0;

    border-radius: 50%;

    background-color: #2639a0;

    background-clip: content-box;

    复制代码

    2.css制作菜单图标三道杠样式

    be25f2309a317159f1e08c71080cd325.png

    复制代码display: inline-block;

    width: 140px; height: 10px;

    padding: 35px 0;

    border-top: 10px solid;

    border-bottom: 10px solid;

    background-color: currentColor;

    background-clip: content-box;

    复制代码

    3.打点loading样式,无需gif图片,仅css搞定loading样式

    3e9520756fba4d212c760a23ad7d1c16.png

    正在加载中...

    复制代码.dot {

    display: inline-block;

    height: 1em;

    line-height: 1;

    text-align: left;

    vertical-align: -.25em;

    overflow: hidden;

    }

    .dot::before {

    display: block;

    content: '...\A..\A.';

    white-space: pre-wrap;

    animation: dot 3s infinite step-start both;

    }

    @keyframes dot {

    33% { transform: translateY(-2em); }

    66% { transform: translateY(-1em); }

    }

    复制代码

    4.flex布局中妙用margin: auto

    如下图中使用的flex布局中,图标前的展示数据个数不定,但不会超过4个,如果图标前一个数据也不展示,图标应该靠右显示,最后一个图标元素妙用margin: auto,即使没有前面的数据,只有一个图标也可靠右展示

    margin-left:auto

    复制代码

    041c573c05bcc2c05665bec78a4bffca.png

    5.不使用js,纯css制作水平垂直居中的蒙层弹框,浏览器窗口大小改变,弹窗也会水平垂直居中

    pc端弹窗展示:6cac8c96b87b0f1bbbfa9d5b7395dc8e.png

    移动端弹窗展示:52780d8277c6a0ce2a949f8072e3cc29.png

    内容占位

    复制代码.container {

    position: fixed;

    top: 0; right: 0; bottom: 0; left: 0;

    /* for IE8 */

    background: url(data:image/png;base64,iVB...g==);

    /* for IE9+ */

    background: rgba(0,0,0,.5), none;

    text-align: center;

    white-space: nowrap;

    z-index: 99;

    }

    .container:after {

    content: "";

    display: inline-block;

    height: 100%;

    vertical-align: middle;

    }

    .dialog {

    display: inline-block;

    vertical-align: middle;

    border-radius: 6px;

    background-color: #fff;

    text-align: left;

    white-space: normal;

    }

    复制代码

    展开全文
  • 支持ie8单选框与复选框自定义样式
  • 在我的资源http://download.csdn.net/detail/zhu_nana/9555749的基础上做了升级,,,,即为升级版---支持ie8单选框与复选框自定义样式
  • 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;
        }
    
    展开全文
  • -- 单选 --> <p class="select_icon"> <input type="radio" name="select3" class="icon_btn"> <span class="icon_text">46岁~55岁</span> </p> <p class="select_icon">...
  • ",于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,而且最重要的是效果好,故在此和大家分享一下。原理:之前已经提及,...
  • input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; top: 15px; left: 15px; } input[type=radio]:af...
  • 支持ie8单选框与复选框自定义样式

    千次阅读 2016-06-21 17:36:01
    /* wrapper divs 复选框与单选框样式 */ .custom-checkbox,.custom-radio{position:relative;} /* input, label positioning 该样式控制checkbox */ .custom-checkbox input{position:absolute;left:2px;top:0px;...
  • 方法一: 给input添加 -webkit-appearance: none;...然后添加自己的样式就好了。 例如: .radioBox input{ -webkit-appearance: none; width: 20px; height: 20px; padding: 0; background-c...
  • 如何用一个原生css编写单选框自定义样式 这是普通的单选框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css单选框</title> <style type="text/...
  • ---恢复内容开始---  在很多时候,浏览器自带的单选框和复选框的样式不够美观,并且浏览器的样式之间带有差异。已经不足以我们生产的...复选框自定义样式  复选框我们最经常遇到的问题,就是对号的样式多种多...
  • ListViewRadioBtnDemo自定义单选框样式
  • 自定义单选框样式

    2018-05-07 14:18:54
    大多数情况下我们需要重新定义单选框样式,比如下图:html代码如下:&lt;div class="user-info-detail"&gt;  &lt;p&gt;  &lt;span class="item-name"&gt;性别&...
  • 表单组件的样式控制算是antd组件使用的一大坑了。 .以antd-mobile为例,checkbox选中与非选中状态是由Input包裹的父元素的‘.am-checkbox-checked’来控制的 未选中时的DOM结构(没有am-checkbox-checked) ...
  • Html单选按钮自定义样式

    千次阅读 2019-09-17 14:43:30
    前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种...
  • <!doctype html> <html> <head> <meta charset="utf-8">...自定义单选框radio样式</title> </head> <style> body { margin: 0; } input { ...
  • js使用li或者div来模拟input的复选框和单选框样式,7行代码,兼容好
  • 最简单明白的纯css自定义单选框和复选框
  • 方法一 ...input[type="checkbox"]:checked + i,input[type="radio"]:checked +...<label><input type="radio" name="def" disabled checked>✓单选框禁用已选</label><br> 方法二
  • 隐藏默认样式。然后添加自己的样式就好了。例如:.radioBox input{-webkit-appearance: none;width: 20px;height: 20px;padding: 0;background-color: #fff;border: 1px solid #c9c9c9;border-radius:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,320
精华内容 8,928
关键字:

单选框自定义样式