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样式的输入字段

回答

相关问题