Styling Eingabe von text CSS

Ich versuche zu erstellen Eingabe von text, wie unten Bild :


Styling Eingabe von text CSS


Zuerst habe ich verwendet, CSS3, mit etwas Hilfe wie diese Geige . aufgrund von Problemen mit alten Browsern erreichte ich nicht verwenden CSS3.
Jetzt habe ich codiert, wie diese :

input[type=text]
{
    color: #979797;
    height: 28px;
    padding-left: 10px;
    text-decoration: none;
        background-image: url('Pictures/Input-BG.png');
    background-repeat: repeat-x;

}
   <input id="txtScrictAddress" value="Your Adress (required)" type="text" />

Input-BG.png ist das Bild :

Styling Eingabe von text CSS

und hier ist das Ergebnis.

  1. Habe ich slice-Eingabe-Bild rechts ?
  2. Eingang hat einen linken Rand Farbe , Wie sollte der Stil, der Eingang in css wie ist das Bild?
  • Das Bild ist gut, fügen Sie border: 0; deaktivieren Sie das standardmäßige Grenze Stil.
  • Danke, Was ist mit shadow auf der linken Seite der Eingang ?
InformationsquelleAutor Shahin | 2011-08-23
  1. 18

    Brauchen Sie nur eine Grenze gesetzt-radius und border auf none. Und Bearbeiten Sie Ihr Bild so, dass das dunkle Ding ist auf der linken Seite auch.

    input[type=text]
{
    color: #979797;
    height: 28px;
    padding-left: 10px;
    text-decoration: none;
    background-image: url('http://i.stack.imgur.com/pbpVI.png');
    background-repeat: repeat-x;
    border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/

    border: 0;
}

    http://jsfiddle.net/TGzng/8/

    • Danke. Es scheint besser als mein code, aber ich denke immer noch, Ihre Probe hat kleine verschiedenen mit dem Bild, das ich geputtet. Ich meine, die kleine Schatten auf der linken Seite des Eingangs.
    • Ich verwendete das Bild, das Sie geliefert, das Bild muss bearbeitet werden, umfassen Sie den linken Teil des Schattens.
    InformationsquelleAutor Kyle
  2. 1

    wenn Sie wollen, Bilder zu verwenden, um etwas zu Holen, wo die beiden enden unterscheiden sich, Sie werden mindestens 2 Bilder um das zu bekommen. versuchen Sie die Suche für "Schiebetüren input css". vielleicht in diesem Thema auf SO hilft Ihnen aus (aber es gibt Millionen andere Beispiele aus im web und auf Stackoverflow).

    • Danke. Also du meintest ich sollte zwei Bilder , eins für den linken und einen für den hintergrund , richtig?
    InformationsquelleAutor oezi
  3. 0

    Müssen Sie einen border-radius zum abrunden der Kanten. Das wird nicht funktionieren, pre-IE8 obwohl.

    input[type=text]
{
    color: #979797;
    height: 28px;
    padding-left: 10px;
    text-decoration: none;
        background-image: url('http://i.stack.imgur.com/pbpVI.png');
    background-repeat: repeat-x;
    border:1px solid #777;
    border-radius:5px
}

    Als auch für image-slicing, einfach den Weg zu den linken, verschatteten Teil bedeutet, dass Sie benötigen, um ein sehr breites Bild für den hintergrund. Oder tun Schiebetüren, was die andere person vorgeschlagen.

    InformationsquelleAutor jzm
Schreibe einen Kommentar