CSS样式表令人沮丧的行为

Question

I've having a rather stressful issue. I applied a div class called input to style the boxes on my username /password fields like in the picture below.

However now I want to apply a different styling to the search bar but no matter what I do even If I use a inline style sheet it uses the style of the old input element. I tried pretty much everything.

login 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>

search bar 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>

That last width: parameter in input dictates the width of all input bars on the page.

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

    }

the css i'm trying to apply to the search bar:

searchbar {

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

}

Answer 1

Your CSS selector is wrong.

Instead of this:

searchbar {

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

}

Try this:

.searchbar #text_content {

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

}

A 'dot' denotes you want to target a class name. A 'hash' denotes that you want to target a specific ID. CSS has a clue in its name; Cascading style sheets. Styles "trickle down" from generic to the more specific. Therefore, if you want to target only one single element, then ID's are the way to go...which usually override any generic styles on the elements.

Good luck!

Answer 2

Did you try appying the class directly to the input tag OR using this CSS -

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

}

The CSS you are trying to apply to searchbar is wrong. Searchbar is the class of the div and not the input box. Try using the CSS above and check if it works

Answer 3

So, the searchbar selector should start with a . character and to override the input selector it should probably be .searchbar input

And for input , you probably want .input input as the selector..?

Answer 4

You're using a generic selector for all input fields (Last section of the CSS: input { ..). So the styling will be applied to all inputs.

I'd suggest giving each input it's own class so you can assign different styles for each input. For example.

CSS

.search
{
    background: red;
}

.login
{
    background: blue;
}

HTML

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

Also, the selector 'searchbar' doesn't select anything as it's targeting an element called searchbar. If you want to target classes you need to target with a . For example: .searchbar

Answer 5

input { } applies styles to all input elements input[type="text"] etc...

Instead apply .input input {} to apply styles for input elements inside input class

To apply styles for input elements inside searchbar use .searchbar input{}