登录html

<div class="form">  

<form name="form1" method="POST" action="login.php">
<div class="input">
  <input name="username" id="username" placeholder="Username">

  <input name="password" id="password" placeholder="Password">
  </div>

  <input type="submit" name="Submit" value="Login" class="submit">


</form>
</div>

搜索栏html

<div class="ajax-div">

    <div class="searchbar">

     <input type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content">

    </div>

    <div id="box"></div>
</div>

输入中的最后一个width：参数指示页面上所有输入栏的宽度。

.form {

    margin-top:-182px;
    margin-left:1100px;
    position:static;
    width: 220px;
    height:150px;
    padding: 20px;
    padding-top:10px;
    border: 1px solid #270644;

  background:url(bg-right.png);

}


.label {
        font-size: 12px;
        font-family: arial, sans-serif;
        list-style-type: none;
        color: #999;
        text-shadow: #000 1px 1px;
        margin-bottom: 10px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: block;
    }   




input {
      /* input boxes*/
      -webkit-transition-property: -webkit-box-shadow, background;
      -webkit-transition-duration: 0.25s;
        padding: 6px;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        border-top: 1px solid #666;
        -moz-box-shadow: 0px 0px 2px #000;
        -webkit-box-shadow: 0px 0px 2px #000;
        margin-bottom: 10px;
        background: #FFF;
        width: 130px;

    }

css我正在尝试申请搜索栏：

searchbar {

left: 350px;
top:100px;
width: 300px;

}

Answer 1

您的CSS选择器错误。

而不是：

searchbar {

left: 350px;
top:100px;
width: 300px;

}

试试这个：

.searchbar #text_content {

left: 350px;
top:100px;
width: 300px;

}

'dot'表示您想要定位一个类名。 'hash'表示您要定位特定ID。 CSS有一个名字的线索; 级联样式表。样式从通用到“更具体”的“涓滴”。因此，如果你想只定位一个单独的元素，那么ID就是这样......通常会覆盖元素上的任何泛型样式。

祝你好运！

Answer 2

您是否尝试使用此CSS将该类直接应用于输入标记 OR -

.searchbar input{
// this CSS will only be applied to searchbar input box
left: 350px;
top:100px;
width: 300px;

}

您尝试应用于搜索栏的CSS是错误的。 Searchbar是div的类，而不是输入框。尝试使用上面的CSS并检查它是否有效

Answer 3

因此，searchbar选择器应以.字符开头，并覆盖输入选择器，它应该是.searchbar input

对于input，您可能希望.input input作为选择器..？

Answer 4

您正在为所有输入字段使用通用选择器（CSS的最后一部分：input {..）。因此，样式将应用于所有输入。

我建议给每个输入它自己的类，这样你就可以为每个输入分配不同的样式。例如。

<强> CSS

.search
{
    background: red;
}

.login
{
    background: blue;
}

HTML

<input type="text" class="search" />

此外，选择器“搜索栏”不会选择任何内容，因为它的目标是名为搜索栏的元素。如果你想定位你需要用a定位的类。例如：.searchbar

Answer 5

input {}将样式应用于所有输入元素input [type =“text”]等...

而是应用.input input {}来为输入类

中的输入元素应用样式

要在搜索栏内应用输入元素的样式，请使用.searchbar input {}

CSS样式表令人沮丧的行为

登录html

搜索栏html

输入中的最后一个width：参数指示页面上所有输入栏的宽度。

5 个答案: