自定义checkbox,radio样式

2018-12-28  本文已影响0人  adtk
    .radio input,
    .checkbox input {
        display: none;
    }
    .radio input[type="radio"] + div,
    .checkbox input[type="checkbox"] + div {
        display: inline-block;
        background: white;
        font-size: 12px;
        padding: 4px 14px;
        margin: 2px 10px;
        border-radius: 36px;
        box-shadow: 1px 1px 1px #c4c5c5;
        user-select: none;
    }
    .radio input[type="radio"]:checked + div,
    .checkbox input[type="checkbox"]:checked + div {
        color: white;
        background: #d86599;
    }
//vue

<label class="checkbox" v-for="item of feelings" :key="item.value" style="display:inline-block">
        <input type="checkbox" :value="item.value" :checked="item.checked" v-model="aaa">
        <div>{{item.value}}</div>
</label>


data:{
  aaa: [],
  feelings: [{ value: "品种太少" }, { value: "价格贵"}, { value: "操作不顺畅"}, { value: "其他问题" }]
}
上一篇 下一篇

猜你喜欢

热点阅读