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文件，只是为了检查，是的。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。改用类。您可能会做最好的事情：

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

Answer 2

问题可能是您有两个具有相同ID的元素。
顺便说一句，您可以选择使用此选择器将样式应用于所有输入TextFields。

   form input[type=text] {
        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;
    }

Answer 3

尝试造型这样的输入框：

input[type=text] {
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;
}