单选框和多选框样式

/* ======checkbox====== */
 input[type="checkbox"]{width:14px;height:14px;display: inline-block;text-align: center;vertical-align: middle; 
  line-height: 16px;position: relative;cursor: pointer;}
 input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #222d43;width: 100%;height: 100%;
  border: 1px solid #fff;border-radius:2px;}
 input[type="checkbox"]:checked::before{content: "\2713";background-color: #00aaee;position: absolute;top: 0;left: 0;width:100%;
  border: 1px solid #00aaee; color:#fff;font-size: 14px;}

/* ======radio====== */
input[type="radio"]{width:14px;height:14px;display: inline-block;text-align: center;vertical-align: middle;
    line-height: 16px;position: relative;cursor: pointer;}
input[type="radio"]::before{content: "";position: absolute;top: 0;left: 0;background: #222d43;width: 100%;height: 100%;
    border: 1px solid #fff;border-radius:8px;}
input[type="radio"]:checked::before{content: "\2713";background-color: #00aaee;position: absolute;top: 0;left: 0;width:100%;
    border: 1px solid #00aaee; color:#fff;font-size: 14px;}

你可能感兴趣的:(页面前端)