如何仅使用 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中文网其他相关文章！