XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Suchleiste, Suchfeld bei default... (http://xhtmlforum.de/showthread.php?t=54429)

Shino 06.11.2008 16:29

Suchleiste, Suchfeld bei default...
 
Hi alle zusammen,

hab wieder mal ein Suchfeld Problem:

Wie mach ich´s wenn der User einen Suchbegriff eingibt, aber nicht die suche fortsetzt... Also im Suchfeld was eingibt und dann nicht auf Enter sondern daneben klickt... Möchte das in diesem Falle, das Suchfeld wieder in sein ursprünglichen Zustand zurückspringt (beim daneben klicken)...

Dann würde ich gerne wissen (da ich einen Mac hab und das nicht auf IE 6 und höher testen kann), ob beim anklicken im Suchfeld ein blauer Rahmen zusehen ist? Vielleicht habt ihr Erfahrungen damit :roll:
FF, Opra zeigen den Rahmen beim onFocus nicht an, Safari mit Rahmen und IE 5 auf dem Mac blendet das Textfeld weiss auf die HG-Bild!!!!! Kann man da was machen?

Hier mein CSS-Code:

Code:

.searchbar{
        position:absolut;
        width:118px;
        height:10px;
        margin: 5px 15px auto auto;
        padding: 10px 10px 10px 30px;
        color:#CCCCCC;
        float:right;
        background-image:url(images/searchbar.jpg);
        background-repeat:no-repeat;
        border:none;
        }

.searchbar:focus {
        position:absolut;
        width:118px;
        height:10px;
        margin: 5px 15px auto auto;
        padding: 10px 10px 10px 30px;
        color:#CCCCCC;
        float:right;
        background-image:url(images/searchbarOver.jpg);
        background-repeat:no-repeat;
        border:none;
        }

Hier mein Suchfeld:
HTML-Code:

<div id="searchbar">
<input type="text" class="searchbar"  ID="suche" />
</div>

Danke im Voraus :D

Timo 06.11.2008 17:32

Bei :focus musst nur das reinschreiben was sich ändern soll. Aber zum verhalten in den anderen Browsern kann ich dir nicht sagen :)

Sicher ist, dass der IE und ein paar andere, kennen :focus nicht.

Zu dem mit dem Text wieder löschen, musst du mit JS machen. Ungefähr so
Code:

onblur="this.value = '';"

Shino 06.11.2008 19:39

danke Timo, hat auf jeden Fall weiter geholfen...

Hast du vielleicht eine Ahnung wie die auf

http://www.apple.com

die Suchleiste gemacht haben?
Diese schönen Abgerundeten Kanten und der Rahmen der beim aktivieren auch rund ist? JavaScript? Wie kann ich sowas auch realisieren?

Timo 06.11.2008 20:10

Ich seh da keine hervorhebung. Aber das Runde haben die mit jeweils einem span Links bzw. Rechts vom Feld gemacht.

EvT 06.11.2008 20:26

Diese hübsche "OS X Style Searchbox" gibt es bereits fix und fertig: OS X style searchbox

Alle erforderlichen Dateien kannst du dir dort auch als Zip-Archiv herunterladen (Link am Ende des Artikels). Lies dir auch die Kommentare durch.

Shino 06.11.2008 20:58

Hammmmaaaaaaaa.. Danke für den Tipp ;)

Timo 06.11.2008 21:08

Link nochmal verbessert, da hat sich ein <br /> eingeschlichen: OS X style searchbox : CSS . XHTML . Javascript . DOM : Brand Spanking New

EvT 06.11.2008 21:16

Danke Dir, Timo.;) Ich habe meinen kaputten Link durch einen Link auf Dein Posting korrigiert. Okay?

aboleo 07.11.2008 03:16

Um nicht gerade einen neuen Thread aufzumachen und da das Thema hier bereits angesprochen worden ist, haeng ich meine Frage hier gleich mal mit an.

Kann es sein, dass beim Opera sich der Text, bedingt durch die 3px padding am unteren Rand der Suchbox orientiert?! Bei dieser OS X serchbox ist es mir zwar schon vorher aufgefallen aber ich glaube, das hatte ich damals irgendwie geloesst bekommen, nur kann ich mich leider nicht mehr daran erinnern. Vllt. gibt mir mal jemand von euch so'n kleinen Schubbs.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:53 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023