Question

我有这个css代码：

input[type=radio] {
  opacity: 0;
  float: left;
  width: 25px;
  margin: 0;
  clear: none;
  padding: 5px 0 4px 24px;
  cursor: pointer;
  background-image: url(../images/off.png) left center no-repeat; 
}

input[type=radio]#male:checked {
  background-image: url(../images/radio-male.png) left center no-repeat; 
}

input[type=radio]#female:checked {
  background-image: url(../images/radio-female.png) left center no-repeat; 
}

无论我做什么我都无法让图像显示出来。我查看了chrome中开发人员工具的网络选项卡，看起来好像图像甚至没有被发送到浏览器，这很奇怪，因为我肯定这个网址是正确的。任何提示或提示将不胜感激。

Answer 1

您正在使用background-image，它只应指定图片的网址。如果要在同一行中指定定位/重复，请将其更改为background。

例如：

background: transparent url('../images/radio-female.png') left center no-repeat;

如果您想要颜色和图像，请更改transparent。

看起来您也无法设置收音机输入本身的背景样式，但是您可以通过设置标签样式然后使用填充将背景放在左侧来实现相同的效果。请看我的例子：

http://jsfiddle.net/fqJg7/

Answer 2

我会让你使用就绪jQuery Plugin来做到这一点。在我看来，这将是更好，更优雅的方式。对你来说也会更容易。

例如，您可以使用： http://uniformjs.com/ 。

关于：制服

“你有没有希望你可以设置复选框，下拉菜单，单选按钮和文件上传输入？曾经希望你能控制所有浏览器之间表单元素的外观和感觉吗？如果是这样，Uniform是你最好的朋友。统一使用自定义主题控件屏蔽标准表单控件。它与您的真实表单元素同步工作，以确保可访问性和兼容性。“

有很多插件，你可以得到你想要的。

我希望它有所帮助。

此致

约翰。

Answer 3

这是因为不透明度设置为0.我认为你这样做是因为你想要一个自定义蒙皮单选按钮，所以你使用不透明度来隐藏本机控件，希望当状态改变时背景图像会改变。要实现您想要的效果，您需要将背景图像放在包含的图像上，并使用挂钩到更改的javascript或单击单选按钮上的事件来更新背景。或者完全隐藏本机控件并使用javascript操作它。

我建议使用这样的插件，为您完成所有艰苦工作，让您根据需要更改css：http://code.google.com/p/jquery-checkbox/

另外请注意，如果您的方法确实有效，我建议使用css sprites来更改图像的背景位置，而不是更改源图像本身，因为下载新图像时会出现明显的延迟/闪烁。 http://css-tricks.com/css-sprites/

Answer 4

我认为这是因为你的不透明度设置为0。当我删除它时，它似乎显示单选按钮：http://jsfiddle.net/T4eBA/3/ 如果这不起作用，您能提供有关目录结构的详细信息吗？你现在的css布局方式，我会预测你的结构如下：

index.html，image，css，...等

Answer 5

我很确定大多数浏览器都不支持此功能。您将需要创建一个自定义渲染方法，我看到一些人隐藏了复选框，然后添加图像来保存选中的图像，然后更改复选框，

这样的事情： http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

没有出现的单选按钮的css背景图像

5 个答案: