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/

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

1 个答案:

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

1 个答案:

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