我有一个相当紧张的问题。我在我的用户名/密码字段中应用了一个名为input的div类来设置样式,如下图所示。
但是现在我想在搜索栏中应用不同的样式,但无论我做什么,即使我使用内联样式表,它也使用旧输入元素的样式。我几乎尝试了一切。
<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>
<div class="ajax-div">
<div class="searchbar">
<input type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content">
</div>
<div id="box"></div>
</div>
.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;
}
答案 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 {}