Ergebnis 1 bis 5 von 5

Thema: Frage, Suchfeld anders gestallten?

  1. #1
    Contao-Nutzer
    Registriert seit
    13.10.2012.
    Ort
    Niedersachsen
    Beiträge
    27

    Standard Frage, Suchfeld anders gestallten?

    Hallo Leute, ich habe da mal eine kleine CSS Frage...
    Es gibt ja das Modul für ein Suchfeld das wie folgt aufgebaut ist...
    HTML-Code:
    <div class="mod_search block">
     <form action="suchausgabe.html" method="get">
      <div class="formbody">
       <label for="ctrl_keywords_9" class="invisible">Suchbegriffe</label>
       <input type="search" name="keywords" id="ctrl_keywords_9" class="text" value="">
       <input type="submit" id="ctrl_submit_9" class="submit" value="Suchen">
      </div>
     </form>
    </div>
    Jetzt eine eine Bekannte von mir ein Suchen Feld für eine eigene Internetseite erstellt das sie hübscher findet. Ich weiß das man so etwas irgendwie verändern kann mit Hilfe von CSS, aber ich habe absolut keine Idee wie man das anpassen könnte.

    Die Lupe die zum Suchen auf dem Bild ist, soll bei einem Mouse-Over (hover) dann ganz schwarz werden, dass würde ich vielleicht hinterher hin bekommen, aber wie bekomme ich denn das ganz normale Suchfeld so formatiert das es so aussieht, wie auf dem Bild.. kann mir jemand dabei helfen?

    Gruß, Domi
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    einfach zum Suchfeld ein Absendefeld im Formulargenerator mit der Lupe als Bild anlegen ... das hover Bild und der Rest per CSS

  3. #3
    Contao-Nutzer
    Registriert seit
    13.10.2012.
    Ort
    Niedersachsen
    Beiträge
    27

    Standard

    Also ein Absendenfeld existiert, aber mit der Formatierung per CSS harkt es...

  4. #4
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    das css kannst ja von contao.org abschauen

  5. #5
    Contao-Nutzer
    Registriert seit
    13.10.2012.
    Ort
    Niedersachsen
    Beiträge
    27

    Standard

    Ja, ich habe gerade mal ein wenig in dieser CSS und bei Computerbase geschaut. Mein Ergebnis sieht jetzt ungefähr so aus
    Code:
    #header .mod_search {
     width:140px;
     margin-right:17px;
     margin-left:auto;
    }
    
    #header .mod_search .formbody {
     padding-top:10px;
    }
    
    #header .mod_search #ctrl_keywords_9 {
     width:96px;
     height:26px;
     float:left;
     margin:0;
     padding:0 2px 0 6px;
     background-image:url("tl_files/template/search_text.png");
     background-repeat:no-repeat;
     border:0;
    }
    
    #header .mod_search #ctrl_submit_9 {
     width:27px;
     height:26px;
     float:left;
     margin:0;
     padding:0;
     background-image:url("tl_files/template/search_button.png");
     background-repeat:no-repeat;
     border:0;
     color: transparent;
     cursor: pointer;
    }
    Das einzige was mir mein Arbeitskollege der noch im Büro ist, sagen konnte.. im IE 8 wird noch der Value Text vom Absenden Button angezeigt. Wie bekomme ich den denn noch weg, außer mit "color: transparent;", gibt es da noch einen Trick den ich übersehen habe?

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •