CSS样式表令人沮丧的行为

时间:2012-08-14 11:28:05

标签: html css

我有一个相当紧张的问题。我在我的用户名/密码字段中应用了一个名为input的div类来设置样式,如下图所示。

enter image description here

但是现在我想在搜索栏中应用不同的样式,但无论我做什么,即使我使用内联样式表,它也使用旧输入元素的样式。我几乎尝试了一切。

登录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;

}

5 个答案:

答案 0 :(得分:2)

您的CSS选择器错误。

而不是:

searchbar {

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

}

试试这个:

.searchbar #text_content {

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

}

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

祝你好运!

答案 1 :(得分:1)

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

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

}

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

答案 2 :(得分:0)

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

对于input,您可能希望.input input作为选择器..?

答案 3 :(得分:0)

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

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

<强> CSS

.search
{
    background: red;
}

.login
{
    background: blue;
}

HTML

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

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

答案 4 :(得分:0)

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

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

中的输入元素应用样式

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