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

我在输入框中应用样式时遇到问题。 我这里有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中链接这个时，它成功了

---

可能有什么问题？

首先，页面上不应该有多个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>

---

问题可能是您有两个id相同的元素。
顺便说一下，您可以选择使用此选择器将样式应用于所有输入文本字段

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

---

尝试按如下方式设置输入框的样式：

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

---

@Deryck在您添加的标记中有两个

input

元素具有相同的

id

属性。您重置缓存了吗？Ctrl+F5是的，我只是复制并粘贴了他贴在这里的东西。这可能是他的问题的一部分。奇怪的是，我一直都是这样，我的提琴工作正常，格式正确。你是如何在你的文件中包含header.css的？我尝试了这个，以及其他提到的答案，但仍然不适用。嗯，这真的很奇怪，你能告诉我们如何在HTML代码中包含CSS文件吗？我脑子里唯一的问题是你没有把它包括进去。像这样，真的很奇怪。正如我所说，我尝试将输入的样式分离，并将其放入另一个css文件中，然后加载该文件，结果成功了。但是当我把它包含到我真正的css文件中，我真正使用的那个，它不会应用。你的css文件中一定有冲突，你以前在css中设计过输入框吗？加载页面时，根本不应用任何设计，还是应用不同的设计？CSS加载第一个样式，而忽略其余的样式，这意味着如果您为输入框设置了一次样式，它将不会在第二次设置样式。根本没有任何样式。我应该试着重新做这些事情吗？我试过这个，以及其他提到的答案，但仍然不适用。

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