Habt ihr ein Konzept? Suchformular formatieren oder Formular generell

shyne

Hi,

bin ja schon etwas länger dabei aber jedes mal wenn ich mich an ein Theme mache, welches spezielle Suchbuttons haben will etc, verschwende ich mega viel Zeit...

"Jeder" Browser stellt den Button oder das Formular anders dar. Da verschoben, hier andere Höhe, da fällts komplett in die andere Zeile...

Gibts da ein Konzept, eine genaue Anleitung wie man am besten mit diesen Problemen umgeht?

Werbepost

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

hero1977

ja das nervt. ich mach das seit einiger immer so das ich das suchfeld und den button komplett unsichtbar mache und komplett eine grafik hinterlege. spart man sich eine menge gefummele …

PHP

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
    background-color: #333;
}


#suchwrapper { }
#suchwrapper #search {
    width:214px;
    height:27px;
    margin: 6px 0 0 1px;
    background:url(http://www.de-signed.com/_upload/suchfeld.png) no-repeat 0 2px;
}
#suchwrapper #search p {
    padding:0;
    margin:0;
}
#suchwrapper #search input[type=text] {
    float:left;
    width:172px;
    color:#000!important;
    font-size:13px;
    line-height:1em;
    border:none;
    background:none;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    margin-top:-1px;
    padding-left:5px;
    font-size:12px;
    height:23px;
    border: #C3F 1px solid;
}
#suchwrapper  #searchsubmit {
    float:right;
    width:35px;
    height:27px;
    cursor:pointer;
    border:none;
    background:none;
    text-indent:-5000px;
    display:block;
    border:#0C0 1px solid;
}
#suchwrapper input {
    outline:none;
}
</style>
</head>


<body>
<div id="suchwrapper">
            <div id="search">
              <form id="searchform" action="<?php echo get_option('home'); ?>" method="get">
                <p>
                  <input type="text" size="35" maxlength="50" name="s" id="s" value="Stichwortsuche" onblur="if (this.value == '')
            {this.value = 'Stichwortsuche';}"
            onfocus="if (this.value == 'Stichwortsuche')
            {this.value = '';}" style="color: rgb(198, 198, 198);">
                  <input type="submit" id="searchsubmit" class="search_btn" name="search_button" 
        value="<?php echo attribute_escape(__('Search')); ?>" />
                </p>
              </form>
            </div>
</div>
</body>
</html>

Alles anzeigen

shyne

Thx, habe ich erst jetzt gesehen. Hatte das schon wieder slebst zusammengefummelt :)

herrfischer

habe mittlerweile noch eine bessere methode gefunden:

PHP

input[type="submit"]::-moz-focus-inner { border:0; }
#s { width:56%; 
    height:30px; 
    padding:0 8px; 
    background:#eaeaea; 
    border:none;
    margin-right:0; 
    float:left; }
.submit { width:30%; 
    height:30px; 
    border:none; 
    color:#000; 
    background:#eaeaea;
    cursor:pointer;
    border:0;
    float:right; }

Alles anzeigen

kannst du hier oben rechts sehen: http://www.torico.de/ ist immer auf gleicher höhe! :) endlich eine perfekte lösung ohne bilder etc. (kann man aber zusätzlich verweden is klar …)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Habt ihr ein Konzept? Suchformular formatieren oder Formular generell

Jetzt mitmachen!