如何建立使用影像並在單擊時縮小影像並覆蓋複選框的複選框替代方案？

像複選框一樣使用圖像

問題

創建標準複選框的替代方案，用戶單擊圖像即可縮小圖像並覆蓋複選框。

解決方案

純語意HTML/CSS 解決方案

此解決方案無需預先制定解決方案，並增強對 CSS 技術的理解。

步驟：

1. 為複選框分配唯一的 ID，並使用標籤的 for 將它們連接到標籤屬性。
2. 使用 CSS 隱藏複選框（例如，display: none;）。

3. 使用label::before 偽元素作為複選框的視覺替換：

   • 為未勾選的設定初始背景圖片

4. 利用:checked偽選擇器在選取核取方塊時變更影像：

   • 為選取狀態套用背景影像.
   • 使用同級選取器 ( ) 僅定位與複選框。
5. 使用正確的位置、顯示、寬度和高度設定標籤樣式。

編輯

純CSS 複選框替換

此修改展示了純CSS 驅動的解決方案，無需使用圖片：

• 在標籤上建立一個::before 元素，內容為「✓」。
• 應用圓形邊框和過渡以增強視覺外觀。

實作

codepen 範例示範了此技術操作：

http://codepen.io/anon/pen/wadwpx

程式碼片段

/* Style the labels and images */
label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  /* disable text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

/* Style the checked state */
:checked + label {
  border-color: #ddd;
}

:checked + label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

/* Style the unordered list that contains the checkboxes */
ul {
  list-style-type: none;
}

/* Style the individual list items */
li {
  display: inline-block;
}

<ul>
  <li><input type="checkbox">

以上是如何建立使用影像並在單擊時縮小影像並覆蓋複選框的複選框替代方案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！