代码之家 › 专栏 › 技术社区 › Sotiris Adrian J. Moreno

jQuery和表单选择器

cross-browser css-selectors forms jquery

Sotiris Adrian J. Moreno · 技术社区 · 14 年前

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

上面的代码在ie和opera上可以正常工作,但在firefox和webkit(chrome和safari)上不起作用。

编辑: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>

2 回复 | 直到 14 年前

scunliffe 14 年前

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

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

http://jsfiddle.net/vVN6x/

Ben Lee 14 年前

做这种跨浏览器的标准方法是伪造它。创建一个包含所有自定义输入的图像精灵(例如,这将是两个正方形——一个带有1像素实心黑色边框,一个带有3像素实心红色边框)。然后编写一个javascript代码片段,在加载后通过DOM,隐藏所有输入并用样式化的跨度替换它们。样式跨度将显示正确的图像精灵。然后将偶数个处理程序附加到每个跨度,以便单击它们可以更改基础隐藏输入的状态(还可以更改跨度的类名,以显示与其新状态关联的不同精灵)。

有关详细说明和代码示例,请参见此处: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

http://customformelements.net/features.php