checkbox選中時如何改變預設樣式
阿新 • • 發佈：2019-01-08
剛剛釋出了人生中的第一篇部落格，然後期待的點開，回味一下，不看不知道，一看嚇一跳，我的天，前面都是些什麼東西，還是說所有的第一篇都是那樣的，如果您不小心點開了我。。。的第一篇部落格，請直接跳到最下面，那幾行才是我的內容，這是第二篇，希望不要在那什麼什麼的。 好了，我的廢話太多了，說點有料的東西 **1.**是關於checkbox的，checkbox在選中、未選中的時候是有預設樣式的，但是我們是幹前端的，要對頁面有一定的審美，所以樣式很重要，聽著，是很重要，一般我們選中它時，會給它一個樣式，如背景圖片（檸檬好像只用圖片代替過預設樣式）。 這時，就要給它在選中後，也就是checked的時候加樣式，怎麼加呢？檸檬曾聽說過一句話：不上程式碼的講解都是耍流氓，檸檬從不耍流氓（除非對方帥我一臉）。。。 /* 複選框 */
input[type=“checkbox”] {
-webkit-appearance: none; /清除複選框預設樣式/
border: 1px solid #627BF6;
vertical-align: middle;
width: 18px;
height: 18px;
float: left;
margin-top: 0;
margin-right: 0 !important;
border-radius: 0;
}
input[type=“checkbox”]:checked {
/* background-position: -48px 0; */
background: #627BF6 url(…/images/ [email protected]) ; /複選框的背景圖/
background-size: contain;
}
上個選中後的效果，往下看
我這裡的背景圖片是36px*36px的，所以在設定w、h時都設的18px，其他的可根據自己具體情況修改，這其實是我公司裡的一個小哥哥教我這樣做的，我把它分享給有需要的人，拿好不謝！