javascript - 使 CSS 外观在旧版 iPad(和其他浏览器)中正​​常工作

Question

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

但是，它在原始 iPad 上无法正常工作(即使使用 -webkit-appearance)，因为某些图像的尺寸不正确。

它在 Firefox 中也不起作用。

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

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

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

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

附言。我的网站需要 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;
}

点击一个标签会检查它对应的输入 radio 。这反过来又会更改标签的背景图像，因此您可以在没有 javascript 的情况下使用图像自定义单选按钮。

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