jQuery和表单选择器

我尝试学习jQuery。我看林达的训练视频，其中有下面的代码jQuery和表单选择器

$("document").ready(function() { 
     $("form :checked").css("border", "3px solid red"); 
    });

上面的代码工作正常在IE和Opera，但不会在Firefox和WebKit（铬，Safari浏览器）工作。

jquery的版本是1.3.2。上面的问题是什么？我如何实现跨浏览器与表单选择器的兼容性？

编辑：html代码如下

<h1> 
     Example Form Document</h1> 
<form action="" method="post"> 

<table class="style1"> 
<tbody> 
    <tr> 
     <td class="style2"> 
      First Name</td> 
     <td> 
      <input id="FirstName" type="text" /></td> 
    </tr> 
    <tr> 
     <td class="style2"> 
      Last Name</td> 
     <td> 
      <input id="LastName" type="text" /></td> 
    </tr> 
    <tr> 
     <td class="style2"> 
      Disabled Element</td> 
     <td> 
      <input id="Text1" type="text" disabled="disabled"/></td> 
    </tr> 
    <tr> 
     <td class="style2"> 
      Gender</td> 
     <td> 
      <input id="Male" type="radio" checked="checked"/>M<input id="Female" type="radio" />F</td> 
    </tr> 
    <tr> 
     <td class="style2"> 
      What products are you interested in?</td> 
     <td> 
      <input id="Checkbox1" type="checkbox" checked="checked"/><label for="Checkbox1">Widgets</label><br /> 
      <input id="Checkbox2" type="checkbox" /><label for="Checkbox1">Hibbity Jibbities</label><br /> 
      <input id="Checkbox3" type="checkbox" checked="checked"/><label for="Checkbox1">SplashBangers</label><br /> 
      <input id="Checkbox4" type="checkbox" /><label for="Checkbox1">Whatzits</label></td> 
    </tr> 
    <tr> 
     <td class="style2"> 
      Comments:</td> 
     <td> 
      <textarea id="Comments" cols="40" name="S1" rows="5"></textarea></td> 
    </tr> 
    <tr> 
     <td class="style2"> 
      Optional life story file</td> 
     <td> 
      <input id="File1" type="file" /></td> 
    </tr> 
    <tr> 
     <td class="style2">&nbsp; 
      </td> 
     <td>&nbsp; 
      </td> 
    </tr> 
    <tr> 
     <td class="style2">&nbsp; 
      </td> 
     <td> 
      <input id="Submit1" type="submit" value="submit" /> <input id="Reset1" 
       type="reset" value="reset" /></td> 
    </tr> 
</tbody></table> 

</form>

来源

2010-11-01 Sotiris

您可以显示HTML呢？ – 2010-11-01 16:28:10

其他浏览器，不要让你的风格复选框边境...

的逻辑是正确的，只是不适用在Firefox的风格/ Webkit的。

http://jsfiddle.net/vVN6x/

需要注意的是样品中的边缘工作，而不是边界（除非你在IE）

来源

2010-11-01 16:30:51 scunliffe

谢谢@scunliffe。了解为什么Gecko和Webkit开发人员不支持复选框上的某些样式会很有趣。 – Sotiris 2010-11-01 16:40:13

@Sotiris，这是因为壁虎和Webkit调用操作系统级的库函数来渲染表单元素，而这些库函数通常只接受有限的参数组相比有什么CSS允许。由于浏览器不直接处理这些渲染，因此对它们也没有太多的控制。 – 2010-11-01 16:50:28

@本·李真的很棒的回答。感谢您的这个附加信息 – Sotiris 2010-11-01 17:00:36

标准的方式来做到这跨浏览器是假的吧。创建一个包含所有自定义外观输入的图像精灵（对于您的示例，这将是两个方块 - 一个带有1像素纯黑边框，另一个带有3像素纯红边框）。然后编写一个JavaScript代码片段，它在加载后通过DOM，隐藏所有输入并将其替换为样式化跨度。样式跨度将显示正确的图像精灵。然后将处理程序附加到这些跨度中的每一个，以便点击它们可以更改潜在隐藏输入的状态（并且还会更改跨度的类名以显示与其新状态关联的另一个精灵）。

有关详细说明和代码示例，在这里看到：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

而且有人写了jQuery的兼容库，以方便这一点：http://customformelements.net/features.php

来源

2010-11-01 16:43:31

感谢您的回答。强大的逻辑背后的实施和简单。我真的很喜欢它，我会在不久的将来使用它。再次感谢 – Sotiris 2010-11-01 17:02:00

jQuery和表单选择器

回答

相关问题