如何仅使用 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;
}

示例使用：

<ul class="donate-now">
  <li>
    <input type="radio">

此方法允许您有效地自定义单选按钮外观，使它们类似于按钮而不影响功能。

以上是如何仅使用 CSS 将单选按钮设置为看起来像按钮并保持 IE8 兼容性？的详细内容。更多信息请关注PHP中文网其他相关文章！