Platzieren eines Bildes in Formular-Eingabefeld

Ich versuche, ein einfaches Formular Eingabefeld mit einem Bild zu machen INNERHALB des Feldes in der rechten Ecke funktioniert das Bild als Senden-Taste. Hier ist meine Demo http://jsfiddle.net/BSXsY/ Ich möchte diese Bildklasse (. Schaltfläche) in das Eingabefeld. Danke für jede Hilfe.Platzieren eines Bildes in Formular-Eingabefeld

Quelle

2011-01-15 Lucka

durch zwei Dinge zu ändern, bin ich ziemlich sicher, dass ich getan habe, was Sie gefragt:

.searchinput { 
    color: #666666; 
    font-size: 13px; 
    padding-left: 2px; 
    top: 5px; 
    width: 200px; 

    /* Additions (or rather copies) */ 
    background: url("http://img696.imageshack.us/img696/8137/13133747.jpg") right no-repeat; 
    height: 25px; 
}

Beachten Sie die Höhe geändert hat, das Bild aufzunehmen, möchte mit Textgröße/Ausrichtung spielen.

Quelle

2011-01-15 22:07:52

Dank Das ist, wie ich will es so aussehen lassen, aber wie ich oben gesagt, ich will das machen Bild als Schaltfläche "Senden", sodass ich darauf klicke, um das Formular zu senden. Jede Hilfe in diesem Zusammenhang wird sehr geschätzt. – Lucka

Kurze Antwort, können Sie nicht. Sie müssen die beiden Elemente so gestalten, dass sie so eng miteinander verbunden sind, als wäre das Bild eine Schaltfläche. Ich werde herumspielen und eine Demo machen. –

@Lucka: http://jsfiddle.net/BSXsY/2/ Versuchen Sie das (Works in FF4, IE8, Chrome8) –

Für Astrik Platzierung innerhalb des Eingabefeldes müssen Sie Klasse hinzufügen. Hier

ist der Code:

<input type="text" class="astrik"/>

Jeweilige CSS für die Klasse:

.astrik 
{ 
    background-image: url('../images/red_asterik.png'); 
    height: 100%; 
    width: 100%; 
    background-repeat: no-repeat; 
    background-position: right; 
    background-position-x: 98%; 
}

Quelle

2014-08-06 06:19:42 Gautam

Platzieren eines Bildes in Formular-Eingabefeld

Antwort

Verwandte Themen