Designanpassung Suchfeld

  • Hallo zusammen

    bin neu hier (nicht ganz neu mit Wordpress aber doch hilfsbedürftig) :-)

    Ich würde gerne mein Suchfeld mit diesen abgerundeten Ecken (http://img188.imageshack.us/img188/8894/search7xi.jpg) gestalten, wenn ich den Code von Search.php oder searchform.php

    von <input type="text" auf <input type="search" ändere, geschieht überhaupt nichts ! :-( wo muss ich denn das ändern ?

    Hier noch der Link zu meinem WP http.//www:idotter.ch/wp2

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hmm..
    Ist ein bissl kompliziert..

    Du bräuchtest fünf gestaffelte DIVs mit jeweils einer Rundung für die einzelnen Ecken.
    Also jeweils ein background-image top-left, top-right. bottom-left, bottom-right und ein weiteres background-image für die Lupe.

    Hoffe das war nicht zu verwirrend..
    Gruß

  • Nee, du verstehst mich falsch, es gibt per HTML-Definition dieses auf dem Bild unter dem Link abgebildete Suchfeld, das im Apple-Style daher kommt.

  • Ja ich weiss, Firefox soll das glaube ich demnächst auch unterstützen und ansonsten schauts einfach wie ein normales Textfeld aus.

    Genau so :

    Zitat

    <input type="search">

    habe ich es versucht...
    Ich habe in der searchform.php mit diesem Inhalt


    PHP
    <form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="text" onClick="if(this.value=='Suche und Enter') this.value='';" value="Suche" name="s" id="s"autosave=" onblur="if (this.value =='') {this.value ='Search';}"
    onfocus="if (this.value =='Search') {this.value ='';}" />
     /></form>

    ... input type="text" in type="search" geändert, ohne Ergebnis.

    An was liegts ?


    Marc

  • Ist zwar alles andere als barrierefrei (Text kann nur ganz leicht skaliert werden), aber du könntest dem input Feld die gewünschte Grafik als background geben.

    HTML
    input {
    background: url(images/search_field_bg.gif);
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!