今天在做專案的時候有需要用到多選框，並且因為ui的關係，需要稍微美化一下多選框，所以找到了實現方法，挺實用的，不需要指令碼就能實現。

前端佈局如下：

<input class="select-tag-input" type="checkbox" id="tag-id"style="display: none;">
<label class="tag-label" for="tag-id"></label>

css如下：

/*checkbox樣式*/
.select-tag-input + label{
    background-color: #eaeaea;
    /*border: 1px solid #C1CACA;*/
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 9px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    margin-right: 18px;
    margin-top: 9px;
}


.select-tag-input + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}


.select-tag-input:checked + label {
    background-color: #eaeaea;
    /*border: 1px solid #92A1AC;*/
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    color: #243441;
}


.select-tag-input:checked + label:after {
    content: '\2714';
    position: absolute;
    top: -11px;
    left: 0px;
    color: #758794;
    width: 100%;
    text-align: center;
    font-size: 1.4em;
    padding: 1px 0 0 0;
    vertical-align: text-top;
}