自定义input[type="radio"]的样式
vue input复选框checkbox默认样式纯css修改
vue 修改checkbox样式:
<div class="data_list"><input type="checkbox" class="check_box tui-checkbox" v-model="checkedNames"><label class="title">xx</label></div>css:.data_list{}.tui-checkbox:checked {background: #1673ff;border: solid 1px #1673ff;}.tui-checkbox {width: 0.5rem;height: 0.5rem;background-color: #ffffff;border: solid 1px #dddddd;-webkit-border-radius: 50%;border-radius: 50%;font-size: 0.8rem;margin: 0;padding: 0;position: relative;display: inline-block;vertical-align: top;cursor: default;-webkit-appearance: none;-webkit-user-select: none;user-select: none;-webkit-transition: background-color ease 0.6s;transition: background-color ease 0.6s;}.tui-checkbox:checked::after {content: '';top: 0.1rem;left: 0.09rem;position: absolute;background: transparent;border: #fff solid 2px;border-top: none;border-right: none;height: 0.12rem;width: 0.25rem;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
css：
<style>.xieyi input[type="checkbox"]{display: none;outline: none;}.xieyi label{display: inline-block;width: 10px;height: 10px;border: 1px solid #000;position: relative;border-radius: 3px;}.xieyi input[type="checkbox"]:checked+label{/*当复选框选的的时候改变边框色*/border-color: #dd5541;}.xieyi input[type="checkbox"]:checked+label:before{content: '';display: inline-block;width: 2px;height: 8px;background: #dd5541;transform:rotate(-30deg);position: absolute;top: 1px;left: 0;}.xieyi input[type="checkbox"]:checked+label:after{content: '';display: inline-block;width: 2px;height: 12px;background: #dd5541;transform:rotate(30deg);position: absolute;top: -2px;left: 5px;}</style>
html:
<div class="xieyi"><input type="checkbox" id="check"><label for="check"></label><!--input的id可以和label的for相互绑定--></div>
/*全选*/.heji #select_all input {display: none;}.heji #select_all span {float: left;width: 0.2rem;height: 0.2rem;border-radius: 50%;border: 1px solid #a9a6a6;}.heji #select_all input:checked+span {/*推荐*//*background: url(binggou.png) no-repeat center;*/background: red;background-size: 30px;}<label id="select_all"><input type="checkbox" /><span></span></label>
另一种：radio
css：
<style>.radio_box{margin-top: 0.55rem;display: flex;}.select_card{color: #999999;font-size: 0.28rem;}.select_card:nth-child(2){margin-left: 1.4rem;}.select_card input[type="radio"]{opacity: 0; width: 0; height: 0;}.select_card input[type="radio"] + label::before{content: "\a0"; /*不换行空格*/display: inline-block;vertical-align: middle;font-size: 18px;width: 0.35rem;height: 0.35rem;margin-right: .4em;border-radius: 50%;border: 1px solid #999999;text-indent: .15em;line-height: 1; }.select_card input[type="radio"]:checked + label::before{background: url(../images/gou.png) no-repeat center;border:none;background-size: 100% 100%;}</style>
html:
<div class="radio_box"><div class="select_card"><input type="radio" id="man" name="sex" checked /><label for="man">男</label></div><div class="select_card"><input type="radio" id="woman" name="sex" /><label for="woman">女</label></div></div>
