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

Answer 2

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

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

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

3 个答案: