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

InformationsquelleAutor user3139952 | 2013-12-27
Schreibe einen Kommentar