使 CSS 外观在旧 iPad（和其他浏览器）中正​​常工作

Question

css 属性appearance 允许您使用自定义图像更改单选按钮。这对于具有不同变体的产品非常有用，例如，因为用户可以点击/单击变体图像而不是单选按钮。

但是，它在原始 iPad 上无法正常工作（即使使用 -webkit-appearance），因为某些图像的尺寸错误。

它在 Firefox 中也不起作用。

我想知道是否有任何 jquery/javascript 插件可以使它们正常工作。

我知道有 unifrom.js 和 Ryan Fait's script 可以让您交换单选按钮和图像，但这些涉及创建跨度，不如 appearance 优雅。

我有 read about hacks 来制作外观，但找不到任何有关如何实现它们的链接。

希望有一些东西可以强制外观正常工作（就像有脚本强制旧版浏览器识别 HTML5 标记一样）。

PS。我的网站需要 Javascript 才能工作，所以我不担心关闭 JS 的用户。它也是平板专用版本，所以我不太关心IE用户。

Answer 1

没有可靠的跨边界设置单选按钮样式的好方法。但是，有一个不使用 javascript 的非常简单的解决方案：

body {
  padding: 50px;
}

input[type=radio] {
  opacity: 0;
  position: absolute;
  margin-top: 2px;
}

label {
  padding-left: 48px;
  margin-right: 20px;
  font: normal 38px/130% sans-serif;
  background: transparent url(http://www.screwdefaultbuttons.com/images/radio.jpg) 0 0 no-repeat;
}

input[type=radio]:checked + label {
  background-position: 0 -43px;
}

​点击一个标签会检查它对应的输入单选。这反过来又会更改标签的背景图片，因此您可以使用不带 javascript 的图片自定义单选按钮。

您可以在此处查看演示：http://jsfiddle.net/wa2Gz/