Question

我似乎无法弄清楚这一点。我需要另一双眼睛。

我正在设置我的密码输入框的样式，以与文本输入框相同的方式查看/反应。

这是HTML：

<fieldset class="contact">
    <label for="full_name">Purchasing Account ID:</label>
    <input type="text" id="acc_id" name="acc_id" size="13" />
    <label for="email_address">Email Address:</label>
    <input type="text" id="email_address" name="email_address" size="13" />
    <label for="password">Password:</label>
    <input type="password" id="pw" name="pw" size="13" />
</fieldset>

这是CSS：

form input[type=text], form input[type=password] {
    width: 306px;
    background: #f3f3f3;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-right: 0;
    border-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 10px 10px;
    font-size: 12px;
    color: #373737;
    -moz-box-shadow:inset 3px 3px 5px #e9e9e9;
    -webkit-box-shadow:inset 3px 3px 5px #e9e9e9;
    box-shadow:inset 3px 3px 5px #e9e9e9;
}
form input[type=text]:focus, form input[type=password]:focus, form textarea:focus {
    border: 3px solid #c70000;
}

关于为什么密码输入字段根本没有获取CSS的任何想法？我使用谷歌浏览器进行了检查，并且CSS根本没有应用到密码输入字段，而Firebug显示同样的事情。

Answer 1

如果尝试这种方法怎么办？在输入中添加一个css类，然后通过这些类应用样式。

http://jsfiddle.net/zr6yB/

<fieldset class="contact">
    <label for="full_name">Purchasing Account ID:</label>
    <input type="text" id="acc_id" name="acc_id" size="13" class="input-generic" />
    <label for="email_address">Email Address:</label>
    <input type="text" id="email_address" name="email_address" size="13" class="input-generic" />
    <label for="password">Password:</label>
    <input type="password" id="pw" name="pw" size="13" class="input-generic" />
</fieldset>

CSS（缩写）

.input-generic {
    width: 306px;
    ...etc...
}

Answer 2

试试这个：

.Div_Class_Name input[type=text], .Div_Class_Name input[type=password] {
    background:#e5e2b6;
    border:2px solid #741a01;
}

Answer 3

想出来。 CSS include的引用仍然引用我的实时副本，而不是我的开发副本。

样式密码输入字段WITH / CSS

3 个答案: