CSS/HTML: Input fields not using CSS styles

Question

I want to style the text input areas on my form, however when I create a style for input in css, it does not actually style the input box. I have been able to style my button, just not input boxes.

<div class="loginContainer">
        <form action ="" method="post">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <label for="username" class="label">Username</label>
                    </td>
                    <td width="150">
                        <input type="text" name="username" size="25" id="username" autocomplete="off" />
                    </td> 
                </tr>
                <tr>
                    <td>
                        <label for="password" class="label">Password</label>
                    </td>
                    <td width="150"> 
                        <input type="password" name="password" size="25" id="password" autocomplete="off" />
                    </td>
                </tr>
            <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
            <tr>
                <td>
                    <label for="remember">
                        <input type="checkbox" name="remember" id="remember"> Keep me signed in
                </td>
            </tr>
            <tr>
                <td>
                <input type="submit" class="submit" value="Log in">
            </td>
            </tr>
        </table>
        </form>

And here is the CSS for it:

input[type="text"] {
    padding: 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
    display: block;
}

This ends up creating a form which creates: http://i.imgur.com/9Hj9Vie.png

Note the lack of style on the input fields. How should I go about fixing this?

Answer 1

It's kind of strange that the border radius is not applied, you can try the following ( note the lack of quotes ):

input[type=text] {
    padding: 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
    display: block;

    /* new stuff */
    border: 1px solid pink;
    outline: 1px solid green;
    background: orange;
}

Answer 2

If you want the for the password field also to be styled you need to add that tag in the style as well, like this:

  input[type=text], input[type=password] {
    padding: 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
    display: block;
}