✔ Text-Input ohne Rand

[extexo]

Moin,

ich hab ein Inputfeld, das Inputfeld soll ohne Rand innerhalb des DIV-Elements
dargestellt werden undswar am oberen Rand (vertical-align:top.

Leider wird oberhalb des Inputfeldes ein Rand dargestellt.
Das DIV ist rot hinterlegt damit man es erkennen kann.

Es muss also der rote Rand oberhalb des Inputfeldes wegfallen.
Probiert hab ich bereits mit border:none; margin/padding:0;
Leider tut sich nichts.

Im Anhang hab ich das Bild in dem es nochmal veranschaulicht ist.

Das zweite Bild im Anhang zeigt den Grund warum das so sein muss.
Ich hab ein Input-Feld und links, sowie rechts daneben zwei Grafiken
die das Aussehen des Inputfeldes vervollständigen. Leider rutscht das
Inputfeld extrem nach unten, das muss ich irgendwie vermeiden.

Gruß

// CODES

		<div class="input">
			<img src="image/input_left.gif"><input type="text"><img src="image/input_right.gif">
		</div>

.input {
	background:red;
	font-size:11px;
}

.input input {
	border:none;
	background:url(image/input_text.gif);
	height:23px;
}

 

[Maik]

Hi,

ohne jetzt deinen Code zu kennen:

input[type=text] { border-top:none; }

Oder soll der komplette Rahmen entfallen?

input[type=text] { border:none; }

mfg Maik

 

[extexo]

Danke,

aber wie gesagt, das verändern des Randes bewirkt leider nichts

 

[Maik]

Kann auch nicht, denn der "Rand" ist die Hintergrundfarbe des umschliessenden DIVs, wie ich jetzt in deinem nachgereichten Code erst sehe

mfg Maik

 

[Maik]

Setz es mal so um:

.input {
        background:red;
        font-size:11px;
        height:23px;
        overflow:hidden;
}

.input input {
        border:none;
        background: url(image/input_text.gif);
        height:23px;
        float:left;
}

.input img {
        float:left;
}

mfg Maik

 

[extexo]

Kopiert, eingefügt, passt !!
Mit float gehts also.

Vielen Dank!