input【type="checkbox"】標簽與字體對齊

今天分享一個比較實用的技巧，在實際項目中我們會經常遇到表單的input標簽多選和單選的問題，但是往往由於標簽自身的樣式和我們項目的風格很不搭調，就不能實現了，今天就來告訴大家怎麼去實現吧。

第一種：利用偽類：（開源中國）

需要註意的是：在頁面佈局中，還是有input【type=checkbox】的：

它的樣式如下所示：

 後面就是通過js腳本來控制它去實現了；

第二種：採用圖片

這是一個樹形控制項zTree 

註意事項：圖片最好做好兩種狀態圖，並且合併成精靈圖，註意類名的應用，指引入一次，後面的修改background-position: 0 0;就可以了；

 第三種:下麵推薦3種方法實現checkbox/input文本框與文字對齊:

1.使用css實現文本對齊:

<input type="checkbox" class="vat"><label class="vat">這是文字</label>

　　註意:不要隨意加樣式添加在行內,不方便後期的樣式管理.

.vat{vertical-align:top}

　2.使用label中的for屬性對齊

<input type="checkbox" id="more" /> <label for="more">對齊是想要的效果</label>

　3.使用label包裹整個input和文字

<label><input type="radio"/>男</label>

　　參考原博文地址:http://www.cnblogs.com/bubuchu/p/6079862.html