深入淺出：checkbox樣式詳解

一、checkbox樣式表

在HTML中，checkbox（複選框）是一種經常被使用的表單元素。隨著用戶體驗對於網站的重要性不斷提升，優美的checkbox樣式也成為了現代網站重要的設計元素之一。採用CSS樣式表對checkbox進行美化，是一種常見的做法。

HTML代碼：

<label for="checkbox-id">
  <input type="checkbox" id="checkbox-id">
  <span>選項1</span>
</label>

CSS代碼：

input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}
input[type="checkbox"] + span {
  position: relative;
  padding-left: 25px;
}
input[type="checkbox"] + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  background-color: #fff;
}
input[type="checkbox"]:checked + span::before {
  content: "\2713";
  font-size: 14px;
  text-align: center;
  line-height: 18px;
  color: #007aff;
}

以上代碼實現了checkbox默認樣式和選中樣式的美化。通過設置checkbox的opacity、width和height為0，讓其隱藏。使用元素包裹checkbox和文本，可以使得文本點擊時選中checkbox。

二、layui checkbox樣式

Layui是一個輕量級的前端框架，提供了便捷的UI組件和JS模塊，使得前端開發效率更高，同時具有一定的美觀性。Layui的checkbox組件為我們提供美觀的checkbox樣式，並且可以自定義checkbox的形狀、大小等。

HTML代碼：

<div class="layui-form-item">
  <div class="layui-input-block">
    <input type="checkbox" name="like[write]" lay-skin="primary" title="寫作" checked>
    <input type="checkbox" name="like[read]" lay-skin="primary" title="閱讀">
    <input type="checkbox" name="like[play]" lay-skin="primary" title="遊戲">
  </div>
</div>

以上代碼展示了Layui使用checkbox組件的方法。通過設置lay-skin屬性，可以實現不同皮膚和風格的checkbox樣式。可以在初始化時設置checkbox的選中狀態（checked）。此外，Layui的checkbox組件還提供了許多自定義方法和事件，如lay-filter、lay-text等。

三、checkbox樣式圖片

除了使用CSS樣式和UI庫提供的皮膚外，我們還可以使用圖片來實現checkbox的美化。將checkbox替換為圖片，需要使用元素的for屬性，將checkbox和圖片關聯起來。

HTML代碼：

<label for="checkbox-id">
  <input type="checkbox" id="checkbox-id" style="display:none">
  <img src="checkbox_unchecked.png" id="unchecked">
  <img src="checkbox_checked.png" id="checked">
</label>

CSS代碼：

#checkbox-id:checked + #checked {
  display: block;
}
#checkbox-id:not(:checked) + #unchecked {
  display: block;
}
#checked, #unchecked {
  display: none;
  width: 18px;
  height: 18px;
}

以上代碼使用for屬性使得圖片和checkbox關聯，使用CSS代碼設置圖片的顯示和隱藏。checkbox選中時，顯示選中狀態的圖片；未選中時，顯示未選中狀態的圖片。

四、checkbox樣式美化

為了讓checkbox更符合頁面設計風格，我們可以對其進行美化，使得其顏色、邊框和形狀更加一致。以下代碼將checkbox變成了紅色圓形：

CSS代碼：

input[type=checkbox] {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none;
}
input[type=checkbox]:checked {
  background-color: #ff0000;
  border-color: #ff0000;
}

以上代碼使用了CSS3的border-radius屬性將checkbox變成了圓形。通過設置background-color和border-color實現狀態的改變。通過設置outline: none，消除焦點的邊框。

五、checkbox樣式修改

checkbox樣式的修改並不局限於單一的顏色或形狀的改變，我們還可以針對不同狀態的checkbox進行不同的樣式設置。以下代碼展示了checkbox在不同狀態下的樣式修改：

HTML代碼：

<input type="checkbox" id="checkbox-id"/>
<label for="checkbox-id">點擊我</label>

CSS代碼：

/* 默認狀態 */
#checkbox-id {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
}

/* 滑鼠移入狀態 */
label:hover #checkbox-id:not(:checked) {
  border-color: #007aff;
}

/* 選中狀態 */
#checkbox-id:checked {
  background-color: #007aff;
  border-color: #007aff;
}

/* 選中狀態下的描邊 */
#checkbox-id:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
  margin-top: 2px;
  margin-left: 6px;
}

以上代碼將checkbox默認狀態下的border-radius設置為3px，顯示為正方形。滑鼠移入狀態下的border-color和hover偽類組合使用，當滑鼠移入label元素時，checkbox的邊框顏色發生變化。選中狀態下的background-color和border-color為藍色。選中狀態下，為checkbox添加白色的箭頭描邊。

六、checkbox選中樣式

除了對checkbox本身進行樣式美化外，我們還可以通過修改選中狀態下的樣式，來改變用戶的視覺反饋。以下代碼實現了checkbox選中狀態下的背景色和樣式變化：

CSS代碼：

label {
  display: inline-block;
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + i.fa {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ccc;
}
input[type="checkbox"]:checked + i.fa {
  background-color: #007aff;
  color: #fff;
  border-color: #007aff;
}

以上代碼中使用:before偽類添加FontAwesome圖標，並設置其樣式。當checkbox被選中時，checkbox後面的FontAwesome圖標的背景色和文字顏色發生變化，來提示用戶當前checkbox已選中。

七、checkbox樣式變成圓形

將checkbox變成圓形是一種常見的美化方式。以下代碼展示了如何將checkbox變成圓形：

CSS代碼：

/* 設置checkbox樣式 */
input[type="checkbox"] {
  position: absolute;
  display: block;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #9b9b9b;
  border-radius: 50%;
}

/* 設置選中狀態下的樣式 */
input[type="checkbox"]:checked {
  border: 1px solid #007aff;
  background-color: #007aff;
  color: #fff;
}

/* 設置偽類，添加選中的勾 */
input[type="checkbox"]:checked:before {
  content: "\2713";
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 20px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #007aff;
}

以上代碼使用position屬性將checkbox定位到其父元素的最上方，使用border-radius屬性實現圓形效果。使用:checked偽類來設置checkbox選中狀態下的樣式，使用:before偽類來添加選中狀態下的勾。

八、android checkbox樣式

在Android應用程序中，checkbox也是一種經常出現的元素。Android系統為我們提供了標準的checkbox樣式，但是這樣的樣式可能無法滿足我們的視覺需求。以下代碼演示了如何修改Android checkbox樣式：

XML代碼：

<CheckBox
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:button="@null"
  android:background="@drawable/custom_checkbox"/>

以上代碼使用android:button屬性將checkbox原生圖標去掉，並使用android:background屬性將自定義的樣式添加到checkbox上。

Drawable代碼（custom_checkbox.xml）：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true">
    <shape android:shape="rectangle">
      <stroke android:width="2dp" android:color="@color/checkBoxStrokeChecked"/>
      <solid android:color="@color/checkBoxBackgroundChecked"/>
    </shape>
  </item>
  <item android:state_checked="false">
    <shape android:shape="rectangle">
      <stroke android:width="2dp" android:color="@color/checkBoxStroke"/>
      <solid android:color="@color/checkBoxBackground"/>
    </shape>
  </item>
</selector>

以上代碼為CheckBox狀態中不同項的對應值和顏色的定義，根據不同的狀態對應不同的顏色。

九、自定義checkbox樣式

通過使用CSS和圖片等等，我們可以自定義checkbox的樣式。以下代碼演示了如何使用Bootstrap自定義checkbox：

HTML代碼：

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckbox2">
  <label class="custom-control-label" for="customCheckbox2">Check this custom checkbox</label>
</div>

CSS代碼：

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}
.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}
.custom-control-input:checked~.custom-control-label::after {
  background-color: #007bff;
}

以上代碼使用Bootstrap的CSS

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/305128.html

深入淺出：checkbox樣式詳解

一、checkbox樣式表

二、layui checkbox樣式

三、checkbox樣式圖片

四、checkbox樣式美化

五、checkbox樣式修改

六、checkbox選中樣式

七、checkbox樣式變成圓形

八、android checkbox樣式

九、自定義checkbox樣式

相關推薦

發表回復