v.plonk!

Blog Search
Usually the search box looks a bit boring, don't you think? So, what about some "magic" effects, huh? There are two ways to get that: You are either a Grand Mage... or just a simple CSS magician.

As most of us are no Grand Mages, we do it the CSS way. So let's have a look at the code of the box:

<div id="blogsearch" class="sidebox">
  <h2><label for="searchbox">Blog search</label></h2>
  <form action="/Schalandra/search/?" method="get">
    <div class="pad">
      <input type="text" name="search" value="" id="searchbox" maxlength="128" />
      <input type="submit" value="search" id="submitsearch" />
    </div>
  </form>
</div>

Nothing to worry about. Just 2 input fields of type "text" and "submit". Now if we would just go ahead and write

#side input {
    color: #ffffff;
    font-size: 12px;
    border: 1px solid black;
    background: #181818;
    width: 162px;
    height: 16px;
}

we would end up in 2 big boxes for the input field AND the button. Looks stupid? It is indeed! And no magic effect either.

So let's start with out first magic trick, called "pseudo classes". In short these pseudo classes enable you to trigger some basic events like: the cursor is hovering over an element... or you just click an element. In our case we use the pseudo classes :hover (we hover over our input field) and :focus (our focus is on that element, means we are using it). And to take it a bit further we use a background image for the different states:

#side input {
    color: #ffffff;
    font-size: 12px;
    border: 1px solid black;
    background: #181818 url('SERVER_URL/input.png');
    margin: 0px 0px 5px 5px;
    width: 162px;
    height: 16px;
}
#side input:hover {
    background: #272727 url('SERVER_URL/input_hover.png');
}
#side input:focus {
    background: #363636 url('SERVER_URL/input_focus.png');
}

Yay! Now we have a really cool effect for our input box. Still, the submit button looks weird... and now it's even worse!

But as we are CSS magicians we have the right spell for this: Attribute selectors. Using attribute selectors you get access to the attributes of a tag. In our case we want to style the submit button. A submit button is in fact just an input field of type "submit":

#side input[type="submit"] {
    background: #272727;
    width: 44px;
    height: 18px;
}
#side input[type="submit"]:hover {
    background: #003256;
}

So let's cast our spell: Attribute selectors!!
POOF!

Now we have a "magic" search field and our search button is still looking fine.