0

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

在此处输入图像描述

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

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

}
4

5 回答 5

2

你的 CSS 选择器是错误的。

而不是这个：

searchbar {

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

}

尝试这个：

.searchbar #text_content {

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

}

“点”表示您要定位类名。“哈希”表示您要定位特定 ID。CSS 的名字有一个线索；级联样式表。样式从通用到更具体的“涓涓细流”。因此，如果您只想定位一个元素，那么 ID 是可行的方法……它通常会覆盖元素上的任何通用样式。

祝你好运！

于 2012-08-14T11:34:47.583 回答
1

您是否尝试将类直接应用于输入标签或使用此 CSS -

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

}

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

于 2012-08-14T11:33:43.420 回答
0

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

而是应用 .input input {} 为输入类中的输入元素应用样式

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

于 2012-08-14T11:35:36.163 回答
0

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

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

CSS

.search
{
    background: red;
}

.login
{
    background: blue;
}

HTML

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

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

于 2012-08-14T11:34:38.367 回答
0

所以，searchbar选择器应该以一个.字符开头并覆盖输入选择器，它可能应该是.searchbar input

而对于input，您可能想要.input input作为选择器..？

于 2012-08-14T11:33:38.987 回答