如何僅使用 CSS 將單選按鈕設定為看起來像按鈕？

用類似按鈕的元素取代單選按鈕

單選按鈕通常用於表單中供使用者選擇。但是，自訂其外觀以模仿常規按鈕可以增強使用者介面。

使用 CSS 轉換單選按鈕

您可以只使用 CSS 來實現此轉換，從而消除需要外部框架。更新後的 HTML 結構保持不變，保留其功能。

HTML 標記

捐贈表單的 HTML 保持不變，包括：

• A
  ;單選按鈕選項清單
• 包含單選按鈕及其標籤的項目

CSS 樣式

以下CSS 程式碼會將單選按鈕轉換為類似按鈕的元素：

.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;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

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

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

怎麼樣有效

• 它將單選按鈕和標籤元素絕對定位在
• 內。
• 單選按鈕的不透明度設定為 0.01，使其在視覺上隱藏。
• 選取單選按鈕時，其連結的標籤會以黃色背景反白顯示。
• 保持標籤上的懸停效果。

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