Bearbeiten input type="search" Pseudo-element-Schaltfläche ('x')
Ich versuche, um eine Suche bar, die schön Aussehen. Was ich getan habe ist, ich habe ein Bild von einem search bar und mit dem ich bin hinzufügen, das Bild auf der Rückseite-Boden des Eingangs-und ich bin der Bearbeitung der Ort und die Größe, die schriftart wird angezeigt.
Das einzige, was ich kann nicht einen Weg finden, zu Bearbeiten ist das kleine 'x' - button, der erscheint, wenn ich mit input type suchen.
Ich möchten verschieben Sie es ein wenig nach Links, so wird es fix my search bar Bild.
Hier ist mein HTML:
<input id="search" name="Search" type="search" value="Search" />
Hier ist mein CSS:
#search{
width: 480px;
height: 49px;
border: 3px solid black;
padding: 1px 0 0 48px;
font-size: 22px;
color: blue;
background-image: url('images/search.jpg');
background-repeat: no-repeat;
background-position: center;
outline: 0;
}
- Ihre Frage ist unvollständig. Die Beispiel, die Sie geben, funktioniert nicht, das Problem zu reproduzieren, Sie zu beschreiben.
- tut es, aber nur in Webkit.
- Eigentlich im IE 11 bekommen Sie das x in input-Feldern, aber, wie es zu ändern ist ein bisschen schwieriger, in FireFox, die Sie nicht haben, noch.
- Danke für den Tipp. Aktualisiert meine Antwort für den IE10+ zu verwenden
-ms-clear
- Ich denke, die Antwort, die Sie suchen, finden Sie hier: davidbcalhoun.com/2012/...
- Hier ist eine Lösung, die ich ausprobiert habe. jsfiddle.net/chandrasekarg/eb2yvgLd/1
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vorausgesetzt, Sie reden von "Suche Abbrechen" [X] - Symbol, das appeas im Webkit-Browser (Chrome, Safari, Opera) können Sie
-webkit-search-cancel-button
pseudo-element. E. g:Demo: http://jsfiddle.net/5XKrc/1/
Mit diesem Ansatz können Sie sogar Ihre eigenen Abbrechen-Taste, zum Beispiel dieses Stils:
Anstelle von [X] erstellt einen roten Kreis.
Demo http://jsfiddle.net/5XKrc/3/
Für IE10 und höher können Sie folgende auf die Schaltfläche verschieben:
Oh, und verwenden Sie
placeholder="Search"
stattvalue="Search"
- es wird angezeigt Wort "Suche", wenn Eingabe leer ist - und wird automatisch entfernen, wenn der Benutzer die Typen etwas.Benutzer erwarten, dass die Dinge nicht viel bewegen ist UIs. Wenn Sie sich entscheiden, um die 'x' - Symbol, ziehen Sie die Verwendung von pseudo-Klassen und bewegen Sie Ihre Suche Symbol statt:
Wenn das Symbol für die Suche eingebettet ist euer hintergrund-Bild, bewegen Sie ihn in ein zweites Bild mit
role="presentation"
Attribut und legen Sie es sofort nach Ihreminput
im markup:Positionieren, wo der Benutzer erwartet:
Dann verstecken und zeigen Sie es mit dem
: - Platzhalter-Anzeige
pseudo-Klassen:Können Sie den Stil der 'x' - Symbol, wenn Sie möchten. Aber wollen Sie vielleicht gar nicht mehr.
Ich bin mir nicht sicher, ist es das, was Sie suchen, aber Sie können Stil Ihre Suche nach bar wie dieser
fiddle
HTML
CSS