Illusion

by csswizardry

HTML

<h1>Search&hellip;</h1>

<form id="search-form" action="#">
    <fieldset>
        <legend class="accessibility">Search our archives</legend>
        <label for="search" class="accessibility">Search terms</label>
        <input id="search" placeholder="Keywords&hellip;" type="text">
        <input id="btn" type="image" src="http://dl.dropbox.com/u/2629908/misc/search.png" alt="Search">
    </fieldset>
</form>

CSS

html{
    font:1em/1.5 "Helvetica Neue", Arial, sans-serif;
    color:#fff;
    background:#1e2024;
}
html,
body{
    margin:0;
    background:#1e2024;
}

.accessibility{
    position:absolute;
    left:-9999px;
}

/* Form */
fieldset{
    padding:0;
    width:275px;
    border:1px solid #4885d8;
    background:rgba(0,0,0,0.25);
    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.75) inset;
    box-shadow:0 0 10px rgba(0,0,0,0.75) inset;
}
input{
    font-size:1em;
}
/* Make the fieldset hug the inputs */
#search,
#btn{
    float:left;
    cursor:pointer;
}
#search{
    width:200px;
    padding:15px;
    background:none;
    border:none;
    color:#fff;
}
#search:active,
#search:focus{
    outline:none;
    cursor:text;
}
#btn{
    float:right;
    position:relative;
    top:9px;
    right:9px;
    width:32px;
    height:32px;
}