checkbook實現任何顏色背景

有些時候須要用到checkbook的其餘顏色背景，若是用原生的checkbook會以爲比較沒有視覺美感，因此分享一種實現checkbox裏面增長任何背景任何圖片的點擊。 先貼上html：

<input type="checkbox" class="agree-confirm agree-content" checked="true" id="agree-check">
複製代碼

跟上css：

.agree-confirm{width: 13px;height: 13px;-webkit-appearance: none; background-color: inherit; border:1px solid #18b4ed; border-radius: 3px;}
.agree-confirm:checked:before {
    display: inline-block;
    content:url('../images/login/checkicon-small.png');
    line-height: 14px;
    top:-2px;
    right: 2px;
    color: white;
    position: absolute;
    width: 25px;
}
.agree-confirm:checked{background-color: #18b4ed; border: none;}
.agree-content{position: absolute; top: 14px;right: 133px; transition: background-color ease 0.2s;}
.next-step .login-next{height: 44px; border-radius: 7px;}
複製代碼

從中能夠看出，關鍵的代碼是：-webkit-appearance: none;，這句代碼對於移動端絕大部分的瀏覽器，Android，iOS的移動端瀏覽器都以webkit爲內核 兼容，這句代碼主要做用就是取消了當前元素的默認樣式，咱們要實現checkbook的選中狀態爲其餘背景色：因此就跟上了代碼： .agree-confirm:checked{background-color: #18b4ed; border: none;}

而要保證被選中以前背景色爲透明，則就是用css：background-color: inherit; 跟隨父級顏色便可。 最後看僞類元素： 經過定位，咱們能夠實現對僞類元素進行背景圖片設置，而後就能夠實現被選中狀態圖片顯示，僅僅經過css就能夠實現交互。

//當咱們引進css的時候須要增長版本號，這樣就能夠避免服務器緩存帶來的靜態資源沒更新的問題。