首頁 > web前端 > css教學 > 如何僅使用 CSS 將單選按鈕設定為看起來像按鈕?

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

Linda Hamilton
發布: 2024-11-23 12:36:08
原創
439 人瀏覽過

How Can I Style Radio Buttons to Look Like Buttons Using Only 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板