CSS/HTML：不使用CSS樣式的輸入字段

我想在表單上設置文本輸入區域的樣式，但是當我在css中創建輸入樣式時，它實際上並沒有設置輸入框的樣式。我已經能夠對我的按鈕進行設計，而不是輸入框。CSS/HTML：不使用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

注意在輸入字段缺少風格。我應該如何解決這個問題？

來源

2014-01-29 user1766797

這是一種奇怪的是，圓角半徑不適用，你可以試試下面的（注意沒有引號）：

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

來源

2014-01-29 21:47:06

這產生與上圖相同的結果。沒有橙色背景或粉紅色邊框。 – user1766797

我不明白爲什麼Petar的回答不會改變結果。如果這在前端沒有改變任何東西，請嘗試添加「display：none;」。如果輸入不是隱藏的，你必須有一個錯誤的選擇器，另一個選擇器否決這一個，或者CSS沒有被其他原因應用 - 你就會知道這個問題並不是因爲輸入的風格很棘手。 – mrhigham

顯示：沒有沒有改變結果。以下是整個CSS文件：http://pastebin.com/2CwcNknf 整個登錄文件已在上面發佈。 – user1766797

如果你想在輸入密碼字段也進行風格的你需要在樣式中添加該標籤，如下所示：

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

來源

2014-01-29 22:28:44

CSS/HTML：不使用CSS樣式的輸入字段

回答

相關問題