CSS style wont apply in text input boxes - html

Question

I am having trouble with applying a style in my input box.
I have header.css here
#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;
}
when I try to apply the style to the textbox for the password and username using the header.css, it wont apply. I created a new css file just to check, 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>
and when i try to link this one in my log.php, it worked.
what might be the problem ?

Answer 1

First off, you should not have multiple elements on page with the same id. In this case, both your login and password fields have an ID of "box". Use class instead. You may be better off doing:
<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>
Then, in the css, do
#box input[type='text']{
blah,blah,blah...
}

Answer 2

The problem could be that you have two elements with the same id.
By the way, you can select to apply the style to all input textfields with this selector.
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

Try styling the input box like this:
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;
}