如何讓單選按鈕看起來像是僅使用 CSS 的按鈕？

讓單選按鈕看起來像按鈕

將單選按鈕合併到捐款表單中很常見，但許多人喜歡類似按鈕的外觀，而不是傳統的圓形錶盤。為了實現這一點，可以有效地利用 CSS，而不需要額外的 HTML 或 JavaScript 函式庫。

第 1 步：HTML 結構

保持原始 HTML 結構單選按鈕。例如：

第 2 步：CSS 樣式

使用CSS，自訂外觀：

/* Reset styles */
.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

.donate-now label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Hide the radio button visually */
.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

/* Highlight the button when checked */
.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

/* Visual button design */
.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}

說明：

• 重設樣式刪除預設瀏覽器樣式。
• 使用絕對定位重新定位元素允許單選按鈕與標籤。
• 隱藏單選按鈕 使其在視覺上不可見。
• 偵測到選取狀態 會變更關聯標籤的背景顏色。
• 視覺增強賦予按鈕外觀，包括內邊距、邊框和懸停

透過這些CSS 調整，您的單選按鈕將呈現類似按鈕的外觀，同時保留其功能以及與IE8 等舊版瀏覽器的兼容性。

以上是如何讓單選按鈕看起來像是僅使用 CSS 的按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！