css - 使用 CSS 设计密码输入字段

Question

我就是想不通。我需要另一双眼睛。

我正在尝试设置我的密码输入框的样式，使其看起来/ react 方式与我的文本输入框相同。

这是 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...
}