如何使单选按钮看起来像仅使用 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中文网其他相关文章！