2

我有这个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 中开发人员工具的网络选项卡，看起来好像图像甚至没有被发送到浏览器，这很奇怪，因为我确信 url 是正确的。任何提示或提示将不胜感激。

4

5 回答 5

3

您使用background-image的应该只指定图像的 url。如果要在同一行中指定定位/重复，请将其更改为 just background。

例如：

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

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

您似乎也无法设置无线电输入本身的背景样式，但是您可以通过设置标签样式然后使用填充将背景放在左侧来实现相同的效果。在此处查看我的示例：

http://jsfiddle.net/fqJg7/

于 2012-06-08T14:48:45.837 回答
2

我建议你使用 readyjQuery Plugin来做到这一点。在我看来，这将是一种更好、更优雅的方式。这对你来说也会更容易。

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

关于 : 制服

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

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

我希望它有帮助。

问候，

约翰。

于 2012-06-08T14:52:08.637 回答
1

这是因为 opacity 设置为 0。我认为您这样做是因为您想要一个自定义皮肤单选按钮，所以您使用 opacity 隐藏本机控件，希望当状态更改时背景图像会发生变化。要实现您想要的，您需要将背景图像放在包含图像上，并使用连接到单选按钮上的更改或单击事件的 javascript 更新背景。或者完全隐藏本机控件并使用 javascript 操作它。

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

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

于 2012-06-08T14:56:05.830 回答
0

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

像这样的东西： http ://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

于 2012-06-08T14:50:12.130 回答
0

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

index.html、图片、css、...等

于 2012-06-08T14:48:50.400 回答