jQuery表单选择器:输入不包括:在chrome和firefox中签入

时间:2015-11-02 07:46:10

标签: javascript jquery css google-chrome jquery-selectors

为什么选中:选中或输入类型复选框?我试图使用表单选择器选择所有输入。它在Internet Explorer中运行良好,但在chrome或firefox中运行良好。这是代码:

<!DOCTYPE html>
<html>
<head>
    <title>Using Form Selectors and Filters</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $('form :input').css('border', '3px solid red');
    });
</script>
    <style type="text/css">
        .style1{width: 600px;}
        .style2{width: 200px;}
    </style>
</head>
<body>
    <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 Text Field</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>
                        <input id="Submit1" type="submit" value="submit" /> <input id="Reset1" 
                            type="reset" value="reset" /></td>
                </tr>
            </tbody>
        </table>    
    </form>
</body>
</html>

我可以看到所有输入都以红色边框突出显示,除了那些复选框。这可能是浏览器还是JavaScript问题?我正在努力学习jquery btw。

1 个答案:

答案 0 :(得分:2)

输入类型[复选框]不接受border属性,也许你可以使用 Outline或[1]:http://www.no-margin-for-errors.com/projects/prettycheckboxes/ 用于自定义复选框