input radio checkbox选择样式和获取cookie设置cookie

一、input选择样式

<div class="input-select">
            <div class="input-select-div">
              <input id="item1" type="radio" name="item" value="男" checked>
              <label for="item1"></label>
              <span>男</span>
            </div>
            <div class="input-select-div">
              <input id="item2" type="radio" name="item" value="女">
              <label for="item2"></label>
              <span>女</span>
            </div>
          </div>

.input-select-div {
    position: relative;
    line-height: 30px;
    display: inline-block;
    margin-right: 23px;
  }
  .input-select-div input[type="radio"],.input-select-div input[type="checkbox"] {
    width: 20px;
    height: 20px;
    opacity: 0;
  }
  .input-select-div span{
    margin-left: 10px;
    color: #878787;
    font-size: 16px;
    font-weight: 500;
  }

  .input-select-div label {
    position: absolute;
    left: 5px;
    top: 6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #999;
  }
  .input-select-div .input-bg {
    background: #fff;
    border: 1px solid #fff;
  }

  /*设置选中的input的样式*/
  /* + 是兄弟选择器,获取选中后的label元素*/

  .input-select-div input:checked+label::after {
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    top: 3px;
    left: 3px;
    background: #ff9919;
    border-radius: 50%;
  }
  .input-select-div input:checked+.input-bg[data-v-e56eb3da]::after {
    position: absolute;
    content: "";
    width: 9px;
    height: 4px;
    top: 0px;
    left: 3px;
    border: 2px solid transparent;
    border-left-color: #ff9919;
    border-bottom-color: #ff9919;
    transform: rotate(-50deg);
    background: transparent;
    border-radius: 0;
  }

二、cookie设置

1、设置cookie

 document.cookie = 'uuid' + "=" + res.data.user.uuid ;

2、获取cookie

getCookie: function (name) {
          var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
          if(arr != null) {
            return unescape(arr[2]);
          }
          return null;
        }, //name是你要获取值的属性名