Ready to use CSS: Search Fields

Ich hatte eine neue Idee, weil ich selbst sowas immer toll fand, als ich noch nicht so geübt darin war, meine Eigene CSS zu schreiben. Und zwar waren das "ready to use CSS", also CSS, die schon fix-fertig ist und man muss sie nur noch bisschen anpassen. Ich hab mir gedacht, dass ich sowas auch mal machen könnt. Gebt mir Bescheid, ob ihr sowas gut (und brauchbar) findet, oder eher nicht.

In diesem Fall geht es um Suchfelder.

I had a new idea. Because I really liked this stuff before I was able to write my own CSS. It was ready to use CSS, which basically already says what it is. It is CSS you just have to copy-paste and just have to make very little adjustments like changing the color etc. I thought I could do something like that. Tell me if you like it and want more, or if you think I shouldn't do more of 'em.

In this post it's search field styles.

Markup

Das Markup ist in meinem Post zum Suchfeld erklärt und davon gehe ich aus.
The Marup ist the one I explained in my search field Tutorial.

GCS without script

Markup with button

<form action='http://www.google.co.uk/cse' id='cse-search-box'>
   <input name='cx' type='hidden' value='GOOGLESUCHMASCHINENID'/>
   <input name='cof' type='hidden' value='UTF-8'/>
   <input id='feld' name='q' type='text'/>
   <input id='button' name='sa' type='submit' value='Search'/>
</form>

Markup without button

<form action='http://www.google.co.uk/cse' id='cse-search-box'>
   <input name='cx' type='hidden' value='GOOGLESUCHMASCHINENID'/>
   <input name='cof' type='hidden' value='UTF-8'/>
   <input id='feld' name='q' type='text' placeholder='Search'/>
</form>

Basic with

#feld{
 border: 1px solid #ddd;
 padding: 3px;
 font-family: Comfortaa;
 background: #eee;
}

#button{
 border: 1px solid #ddd;
 padding: 3px;
 font-family: Dosis;
 background: #eee;
 margin-left: 3px;
}

#feld:focus{
 background: #f5f5f5;
 border: 1px dotted #444;
}

#button:hover{
 background: #ddd;
 border: 1px solid #bbb;
}

#button:focus{
 background: #ddd;
 border: 1px solid #444;
}

Basic Without

#feld{
 background: #eee;
 border: 1px dotted #ddd;
 padding: 3px;
 font-family: Courier New;
 letter-spacing: 1px;
}

#feld:hover{
 background: #f5f5f5;
}

#feld:focus{
 background: #f5f5f5;
 border: 1px solid #aaa;
}

Ribbon