CSS/HTML: поля ввода, не использующие стили CSS

Question

Я хочу, чтобы стилировать области ввода текста в моей форме, однако, когда я создаю стиль для ввода в css, он фактически не создает поле ввода. Я смог стилизовать свою кнопку, а не вводить поля.

<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> 

А вот CSS для этого:

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; 
} 

Это заканчивает создание формы, которая создает: http://i.imgur.com/9Hj9Vie.png

Обратите внимание на отсутствие стиля на полях ввода. Как мне это исправить?

Answer 1

Это своего рода странно, что радиус границы не применяется, вы можете попробовать следующее (обратите внимание на отсутствие кавычек):

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

Если вы хотите, чтобы в поле пароля также быть стилизовано вам нужно чтобы добавить этот тег в свой стиль, например:

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; 
}