Bug Tracker

Modify

Ticket #8278 (closed bug: invalid)

Opened 3 years ago

Last modified 2 years ago

Re: FireFox 3.6.13 Selecting Form Checkboxes checked items

Reported by: s.hamed.afghan@… Owned by:
Priority: low Milestone: 1.next
Component: css Version: 1.5
Keywords: Cc:
Blocking: Blocked by:

Description (last modified by jitter) (diff)

I repeat again it didn't work on firefox 3.6.13 My Jquery version is 1.5

My Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using Form Selectors and Filters</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $('form :checked').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 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>
</body>
</html>

Change History

comment:1 Changed 3 years ago by jitter

  • Priority changed from undecided to low
  • Resolution set to invalid
  • Status changed from new to closed
  • Component changed from unfiled to css
  • Description modified (diff)

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

You could have commented on your original bug report that it was closed incorrectly because addyosmani missed the space between form and :checked instead of opening a new ticket and posting a code blob.

After checking your old and new ticket and the code sample I conclude that this isn't a bug in jQuery. You can easily verify that by looking at this  test case. It shows that the selector works and that .css does indeed apply the style, the problem is you don't see it because some browser refuse to actually display the stylings on inputs.

It's a well known problem that the styling of input tags with CSS is difficult because of the very different way browsers handle this. Just google for terms like css, styling, input, radiobutton, checkbox, ... and you will find lots of content. For a starter you can check  http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css . Then you might want to look for a readymade solution (e.g. some jQuery plugin) which handles all this crossbrowser quirks for you.

Dupe of #8276

Version 0, edited 3 years ago by jitter (next)

comment:2 Changed 3 years ago by jitter

#8276 is a duplicate of this ticket.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.