单选和多选自定义样式

 

使用vue语言

 

 这是多选

<div class="div-checked">

     <label v-for="it in AreaData" :key="it.id">
           <input type="checkbox" @change="choseYW" name="pageIdList" value="被选择内容" />
           <span>展示内容</span>
           <span class="i"></span>
     </label>

     <label v-for="it in AreaData" :key="it.id">
           <input type="checkbox" @change="choseYW" name="pageIdList" value="被选择内容" />
           <span>展示内容</span>
           <span class="i"></span>
     </label>

</div>

多选数据处理

choseYW(val, e) {

      var obj = document.getElementsByName("pageIdList");

      const check_val = [];

      for (var k in obj) {

        if (obj[k].checked) check_val.push(obj[k].value);

      }

      // this.ruleForm.pageIdList = check_val.join(",");  这是获取的字符串格式

      this.ruleForm.pageIdList = check_val   //这是数组格式

},

这是单选

<div class="div-checked">
              <label>
                <input type="radio" v-model="ruleForm.type" value="文章" />
                <span class="type1">文章</span>
                <span class="i"></span>
              </label>
              <label>
                <input type="radio" v-model="ruleForm.type" value="课程" />
                <span class="type2">课程</span>
                <span class="i"></span>
              </label>
              <label>
                <input type="radio" v-model="ruleForm.type" value="直播" />
                <span class="type3">直播</span>
                <span class="i"></span>
              </label>
              <label>
                <input type="radio" v-model="ruleForm.type" value="4" />
                <span>
                  <input class="type4" v-model="tag" style="width:100%;height:40px;border:0;text-align:center"/>
                </span>
                <span class="i"></span>
              </label>
</div>

样式如下：

.div-checked label {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 120px;
  height:40px;
  border: 1px solid grey;
  // box-shadow: 0 0 10px #ccc;
  margin: 10px 8px;
  line-height: 40px;
  text-align: center;

  input[type="checkbox"],input[type="radio"] {
    opacity: 0;
  }
  input[type="checkbox"]:checked span ,input[type="radio"]:checked span{
    border-color: #006bc9;
    color: #006bc9;
  }
  span {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 40px;
  }
  input[type="checkbox"]:checked + span + .i:after,input[type="radio"]:checked + span + .i:after {
    opacity: 1;
    content: "";
    position: absolute;
    top: 5px;
    right: 20px;
    display: inline-block;
    width: 12px;
    height:7px;
    background: transparent;
    border:1.5px solid #fff;
    border-bottom: none;
    border-left: none;
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    -ms-transform: rotate(135deg);
    transform: rotate(130deg);
    // z-index: 99999;
  }
  input[type="checkbox"]:checked + span + .i:after,input[type="radio"]:checked + span + .i:after {
    top:-25px;
    right:1px;
  }
  input[type="checkbox"]:checked + span + .i ,input[type="radio"]:checked + span + .i{
    width: 0px;
    height: 0px;
    border-color: #006bc9 transparent;
    color: #006bc9;
    border-width:25px 0px 0px 25px;
    border-style: solid;
    position: absolute;
    right: 0rem;
    top: 0rem;
    opacity: 1;
  }
  .type1{background: #c7f481;}
  .type2{background: #81fffe;}
  .type3{background: #f6c48b;}
  .type4{background: #03adef;}
}