PHP-Fusion.at - Offizielle Supportseite für PHP-Fusion

Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

Du hast in deinem Browser kein Javascript aktiviert.
Um diese Seite korrekt anzuzeigen ist Javascript jedoch zwingend nötig.
Bitte aktiviere Javascript in den Einstellungen deines Browser beziehungsweiße besorge dir einen Browser, der diesen unterstützt.
Mozilla Firefox | Safari | Opera | Google Chrome | Internet Explorer höher Version 6

CSS Search Box

Kategorie: CSS

PHP-Fusion Version: Keine

Schwierigkeitsgrad:

Eine schöne und moderne Searchbox

Faq

HTML-Code

GeSHi: HTML

<form class="searchform">
    <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
    <input class="searchbutton" type="button" value="Go" />
</form>
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10

CSS

GeSHi: CSS

.searchform {
    display: inline-block;
    zoom: 1; /* ie7 hack for display:inline-block */
    *display: inline;
    border: solid 1px #d2d2d2;
    padding: 3px 5px;
 
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
 
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
 
    background: #f1f1f1;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top,  #fff,  #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
    font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
    background: #fff;
    padding: 6px 6px 6px 8px;
    width: 202px;
    border: solid 1px #bcbbbb;
    outline: none;
 
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
 
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
    color: #fff;
    border: solid 1px #494949;
    font-size: 11px;
    height: 27px;
    width: 27px;
    text-shadow: 0 1px 1px rgba(0,0,0,.6);
 
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
 
    background: #5f5f5f;
    background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
    background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
gewandelt in 0.002 Sekunden, benutzt wurde GeSHi 1.0.8.10