如何讓單選按鈕看起來像是僅使用 CSS 的按鈕？-css教學-PHP中文網

首頁

web前端

css教學

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

Susan Sarandon

Dec 11, 2024 am 08:57 AM

How Can I Make Radio Buttons Look Like Buttons Using Only CSS?

讓單選按鈕看起來像按鈕

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

第 1 步：HTML 結構

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

<li><input type="radio">

第 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

PHP教程

1658

276

NYT連接提示和答案

287

836

抖音等級價格表

Related knowledge

如何使用CSS創建玻璃塑料效應 Aug 22, 2025 am 07:54 AM

要創建CSS的玻璃擬態效果，需使用backdrop-filter實現背景模糊，設置半透明背景如rgba(255,255,255,0.1)，添加細微邊框和陰影以增強層次感，並確保元素背後有足夠視覺內容；1.使用backdrop-filter:blur(10px)模糊背景內容；2.採用rgba或hsla定義透明背景控制通透程度；3.添加1pxsolidrgba(255,255,255,0.3)邊框及box-shadow提升立體感；4.確保容器具有豐富背景如圖片或紋理以呈現模糊穿透效果；5.為兼容舊瀏

如何在CSS中使用網格 - 板序列 Aug 22, 2025 am 07:56 AM

Grid-template-areaspropertyallowsdevelopspocrockearteeintuitive，ReadableLayoutsByDefiningNemedGridareas; everystringrepresentsarowresentsarowandeashwordeachwordaColumnCell，withGrid-areanamesonamesonameSonemaneMeAnemesonChildEllementsMatchingThoseNoseNementsMatchingTheSoseIntheTemplate，suchans'headerheaderheaderheaderheaderheaderheaderheaderheader for for for for for for

如何使用CSS實現黑暗模式主題 Aug 22, 2025 am 09:55 AM

實現暗黑模式有兩種主要方式：一是使用prefers-color-scheme媒體查詢自動適配系統偏好，二是通過JavaScript添加手動切換功能。 1.使用prefers-color-scheme可自動根據用戶系統設置應用暗黑主題，無需JavaScript，只需定義媒體查詢內的樣式；2.實現手動切換需定義light-theme和dark-themeCSS類，添加切換按鈕，並用JavaScript管理主題狀態和localStorage保存用戶偏好；3.可結合兩者，在頁面加載時優先讀取localSt

如何使用CSS訂購和無序的列表 Aug 22, 2025 am 07:59 AM

CSSallowsfullcustomizationoforderedandunorderedliststoenhancereadabilityanddesignconsistency.Youcanchangedefaultmarkersusingthelist-style-typeproperty,suchassettingunorderedliststousesquare,circle,ornobullets,andorderedliststousenumberingstyleslikede

如何使用CSS設計視頻播放器 Aug 21, 2025 am 10:09 AM

要使用CSS自定義視頻播放器外觀，需先創建一個包含視頻和自定義控件的容器，通過CSS隱藏默認控件並設計自己的播放界面，設置容器樣式以實現圓角、陰影和居中佈局，對播放按鈕、進度條和音量條進行美化，利用偽元素自定義滑塊樣式，通過hover效果控制控件顯示與隱藏，結合響應式設計適配移動設備，移除原生控件的下載和畫中畫選項，並可擴展全屏、靜音等功能按鈕，最終實現一個外觀現代、風格統一且用戶體驗良好的視頻播放器。

位置有什麼區別：絕對和位置：CSS中的相對？ Sep 01, 2025 am 08:11 AM

位置：相對kepersthelementInthenormaldocumentFlowandOffSitFromitSoriginalPositionWhilePreservingItsSpace，MakeTherelelementsBehaveAsifit’sStillThere.2.Position：absolaremovesthelemovesthelemovestheelementfromthedeDocumentFlow，位置，位置sitiratiratiratiratirativetthenearearestpositpositposit

如何在CSS中應用多個類 Sep 02, 2025 am 05:12 AM

AssignmultipleclassesinHTMLbyseparatingclassnameswithspaces:.2.StyleeachclassindependentlyinCSS,suchas.btn,.btn-primary,and.large.3.Allclassstylesarecombinedontheelement,withconflictingpropertiesresolvedbyCSSorderandspecificity—laterormorespecificrul

如何在CSS中垂直對齊文本 Aug 28, 2025 am 08:10 AM

ThemostreliablewaytoverticallyaligntextinCSSisusingFlexboxwithalign-items:center,whichworksforbothsingleandmultiplelinesoftextwithinacontainerofdefinedheight;alternatively,CSSGridwithplace-items:centerofferssimilarbenefitsforgrid-basedlayouts,whileli

See all articles

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

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

ArtGPT

Stock Market GPT

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題