CSS/HTML：不使用 CSS 样式的输入字段答案

【问题标题】：CSS/HTML: Input fields not using CSS stylesCSS/HTML：不使用 CSS 样式的输入字段
【发布时间】：2014-01-29 21:43:57
【问题描述】：

我想为表单上的文本输入区域设置样式，但是当我在 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

请注意输入字段缺乏样式。我应该如何解决这个问题？

【问题讨论】：

标签： html css input styles

【解决方案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;
}

【讨论】：

这会产生与上图相同的结果。没有橙色背景或粉红色边框。
我不明白为什么 Petar 的回答不会改变结果。如果这没有改变前端的任何内容，请尝试添加“display:none;”。如果输入没有隐藏，则您必须有一个错误的选择器，另一个选择器推翻了这个选择器，或者由于其他原因没有应用 CSS - 您会知道问题不是因为输入的样式很难.
Displa:none 没有改变结果。这是整个 CSS 文件：pastebin.com/2CwcNknf 整个登录文件已经在上面发布了。
在你的环境中肯定有一些东西在这里是一个小提琴：jsfiddle.net/zxaA5 尝试自己做一个小提琴，看看它是否适合你。如果确实如此，那么您可以将其与旧版本进行比较并找出问题所在
在 jsfiddle 中工作的相同代码在我的代码中不起作用，我无法弄清楚我的生活出了什么问题。我得到了密码字段的样式，而不是现在的文本字段。

【解决方案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;
}

【讨论】：