jQuery 和表单选择器

Question

我尝试学习 jQuery。我观看了一段 Lynda 培训视频，其中包含以下代码

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

以上代码在 ie 和 opera 上可以正常工作，但在 firefox 和 webkit (chrome,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>

Answer 1

其他浏览器不允许您设置复选框边框的样式...

逻辑是正确的，只是没有在 Firefox/Webkit 中应用样式。

http://jsfiddle.net/vVN6x/

请注意，示例中的边距有效，但边框无效（除非您在 IE 中）

Answer 2

执行此跨浏览器的标准方法是伪造它。创建一个包含所有自定义外观输入的图像精灵（例如，这将是两个正方形——一个带有 1 像素纯黑色边框，一个带有 3 像素纯红色边框）。然后编写一个javascript sn-p，一旦加载，它就会通过DOM，隐藏所有输入并用样式跨度替换它们。样式化的跨度将显示正确的图像精灵。然后将偶数处理程序附加到这些跨度中的每一个，以便单击它们会更改底层隐藏输入的状态（并且还会更改跨度的类名以显示与其新状态关联的不同精灵）。

详细解释和代码示例请看这里：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

有人写了一个兼容 jQuery 的库来促进这一点：http://customformelements.net/features.php