如何僅使用 CSS 將單選按鈕設定為看起來像按鈕並保持 IE8 相容性？

自定義單選按鈕外觀：使它們看起來像按鈕

問題：

您的目標在捐款表格上建立類似按鈕而不是典型的圓形錶盤的單選按鈕。而且，此功能需要在 IE8 中無縫運作。

解決方案：

利用CSS，無需依賴外部框架或對HTML 進行大量修改即可實現所需的結果.

HTML結構：

HTML 結構基本上保持不變，使用單選按鈕清單(ul)。

CSS 樣式：

• 使用不透明度隱藏預設單選按鈕：0.01。
• 定位絕對輸入元素，將其與其頂部的標籤對齊。
• 將標籤設為區塊元素並將其絕對定位以覆蓋整個按鈕區域。使用遊標：指標進行互動。
• 當單選按鈕被選取時，使用 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 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;
}

示例使用：

• 此方法允許您有效地自訂單選按鈕外觀，使它們類似於按鈕而不影響功能。

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