1

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

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

它在 Firefox 中也不起作用。

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

我知道有unifrom.js和Ryan Fait 的脚本可以让你交换单选按钮和图像，但这些涉及创建跨度而不是像appearance.

我已经阅读了有关使外观起作用的技巧，但找不到任何有关如何实现它们的链接。

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

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

4

1 回答 1

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/

于 2012-10-14T14:28:55.663 回答