需求背景：

在頁面設計時，常常會用到input復選框。如果用到一些前端框架的話，一般復選框的樣式都可以滿足需要；但是對于未使用前端框架，直接原生的話樣式可能滿足不了項目需要，因此我們需要修改復選框的樣式，使得界面更美觀或者適應新的需求。由于checkbox偽類修改比較復雜，通常修改的方式有兩種，一個是通過圖片切換實現，另一個是使用純CSS的方法進行修改。本文使用CSS對input中的checkbox進行設置。

效果圖：

主要思路：

如果直接修改checkbox樣式的話，實際是十分麻煩的，可以用一個巧妙的方法。利用<label>標簽的for屬性，把<label>和<input type=checkbox>給綁起來，直接讓checkbox的display屬性設為none，給<label>設置寬高等樣式，當點擊<label>時，同時會觸發checkbox為選中狀態，這是再設置<label>的背景顏色，內容符號。這樣做既保留了checkbox的復選特性，又變得美觀。
1.基本html片段：

<input id="check1" type="checkbox"/> <label for="check1"></label> <!--<lable>標簽的for屬性，綁定到input標簽上-->

2.設置label樣式

/*lable標簽的大小、位置、背景顏色更改，在css選擇時，“+”代表相鄰元素，即當前元素的下一元素*/ #check1 +label{width: 20px;height: 20px;cursor: pointer;position: absolute;border:1px solid grey; }

3.設置復選框選中時的label樣式

復選框選中時其實就是點擊label時

/*當input框為選中狀態時，lable標簽的樣式，其中在css選擇時，“：”表示當前input框的值，即checked；\2714代表對號*/ #check1:checked +label::before{ display: block;content: "\2714";text-align: center;font-size: 16px;background: blue;color: white; }

4.隱藏掉原來的checkbox

#check1{display:none; }

?

總結

以上是生活随笔為你收集整理的通过CSS修改checkbox样式(利用label的for属性进行焦点传递)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。