Schatten in Searchbar entfernen

[rosaro]

Hallo Zusammen,

ich habe eine kleine Frage, die ich (anscheinend) nicht alleine lösen kann:
Folgendes:
Ich wollte den Rahmen meiner Suchfunktion ändern. Sprich nur noch oben und unten einen Rahmen anzeigen...Was allerdings immer bleibt ist ein leichter grauer Rahem links und rechts...?
In der style.css hab ich das produziert:

.search {
    height:50px;
}
.searchform{
    margin:0 auto;
}
#s {
    padding:6px 30px 6px 5px;
    width:111px;
}
.search input[type=text]{
    border-top:#D1DDD9 solid 5px;
    border-bottom:#D1DDD9 solid 2px;
    color:#bcbcbc;
    text-align:center;
}

Und in der searchform.php:

<?php 
$querystring = esc_attr(apply_filters('the_search_query', get_search_query()));
$searchstring = "Suchen";
if (empty($querystring)) { $querystring = $searchstring; }
?>

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
 <input type="text" name="s" id="s" value="<?php echo $querystring; ?>"
            onblur="if (this.value == '') { this.value = '<?php echo $searchstring; ?>'; }"
            onfocus="if (this.value == '<?php echo $searchstring; ?>') { this.value = ''; }" />
</div>
</form>

Ich nehme mal an, es liegt am onblur.........?

Hat jemand einen Tipp, wie ich das ändern kann?

Schon mal DANKE!

Grüße
R

 

[Myhar]

AW: Schatten in Searchbar entfernen

Du musst die Rahmen + Schatten für deine Inputfelder komplett zurücksetzen, das machst du nirgends. Jeder Browser hat da nämlich seine eigenen Style-Anweisungen. Da hilft es nicht, nur border-top und border-bottom zu definieren.
Auch kannst du die onblur und onfocus Attribute entfernen und dir statt dessen einmal das placeholder Attribut ansehen. Auch ein Label für dein Suchfeld ist sicher nicht verkehrt.
Als letzten Tipp: Besorg dir Firebug (oder nimm die in Chrome, Opera, IE vorinstallierten Webdeveloper Tools), dann kannst du solche Style Fehler leicht selber beheben.

 

[hub]

AW: Schatten in Searchbar entfernen

Moin moin,
Myhar war schneller ...

border-left: none;
border-right: none;

oder alle aus und dein Style setzen:

.search input[type=text]{
    border: none;
    border-top:#D1DDD9 solid 5px;
    border-bottom:#D1DDD9 solid 2px;
...

Gruß Ulli

 

[rosaro]

AW: Schatten in Searchbar entfernen

Danke Leute!

Ich setzte mich gleich mal ran