html - CSS 样式不适用于文本输入框

Question

我在输入框中应用样式时遇到问题。我这里有 header.css

@charset "utf-8";
    body, h1, h2, h3, h4, h5, h6, p, div, ul, li  {
margin:0;
padding:0;
    }

    body { font family: Verdana; background-color: #FFFFFF }

    #Wrapper {
width: auto;
height:2000px;
margin: 0 auto;
    }

    #divHeader {
position:0px;
width: 100%;
height: 180px;
background:url(thisheader/header_1.png)
    }

    #divHeader2 {
position: 180px;
width: 100%;
height: 200px;
background: url(thisheader/SMCFIbanner.png);
    }

    #box {
background: white;
border: 1px solid #DDD;
border-radius: 1px;
box-shadow: 0 0 3px #DDD inset;
color: #666;
padding: 5px 10px;
width: 185px;
outline: none;
    }

当我尝试使用 header.css 将样式应用于密码和用户名的文本框时，它不会应用。我创建了一个新的 css 文件只是为了检查，yes.css:

   input#box {
        background: white;
        border: 1px solid #DDD;
        border-radius: 1px;
        box-shadow: 0 0 3px #DDD inset;
        color: #666;
        padding: 5px 10px;
        width: 165px;
        outline: none;
    }

log.php

<div>
<form method="post" action="checkLogin.php">
    <label>Username</label>
    <input type="text" value="" name="myusername" size="20%" class="input_field" title="username" id="box" />
    <br>
    <br>
    <label>Password</label>
    <input type="password" value="" name="mypassword" class="input_field" title="password" id="box" />
    <br>
    <br>
    <input type="submit" name="login" value="Login" alt="login" id="submit_btn" title="Login" />
</form>
</div>

当我尝试在我的 log.php 中链接这个时，它起作用了。

可能是什么问题？

Answer 1

首先，页面上不应有多个元素具有相同的 ID。在这种情况下，您的登录名和密码字段的 ID 均为“box”。改用类。你最好这样做:

<div id='box'>
<form method="post" action="checkLogin.php">
    <label>Username</label>
    <input type="text" value="" name="myusername" size="20%" class="input_field" title="username" />
    <br>
    <br>
    <label>Password</label>
    <input type="password" value="" name="mypassword" class="input_field" title="password"/>
    <br>
    <br>
    <input type="submit" name="login" value="Login" alt="login" id="submit_btn" title="Login" />
</form>
</div>

然后，在css中，做

#box input[type='text']{
   blah,blah,blah...
}