✔ Durchsichtiges input text feld

[js-mueller]

HI

ich möchte auf eine Grafik ein input feld legen, so diese Grafik sieht aus wie ein textfeld.
Ich möchte halt das es so aussieht als wenn man auf das Grafische Feld schreibt und nicht in ein normales.
Oder ist es vieleicht sogar möglich ein input feld grafisch darzustellen?
Ich hoffe ich habe mein Problem verständlich geäußert

 

[Wiegi]

Mach eine Tabelle, setz deine Grafik als Hintergrund und setz dann die Textarea drüber. So hab ich es gemacht und klappt wunderbar.
Musst eben nur noch das Eingabefeld farblich auf deine Grafik abstimmen.

 

[js-mueller]

ja aber kann ich die Textfelder unsichtbar machen? Weil wenn ichs drüber setze sehe ich ja nicht die Grafik dahinter.

 

[saimoto]

Du kannst aber auch direkt dem <input /> ein Hintergrundbild geben:

style="background-image:url(bg.jpg);"

 

[Wiegi]

Nein, durchsichtig geht nicht, soweit ich weiss. Aber es gibt Methoden, das es trotzdem gut aussieht.

Mach die Grafik halt ein bisschen grösser, um das Textfeld herum.

 

[xChronoX]

....und es geht.......

...wenn du eine CSS datei perrat hast......dann seh dir das bespiel an:

css_datei

input {
font-size: 11px; font-family: Verdana;
COLOR: #7F91B4;
border: 2px;
border-left: 3 solid OrangeRed;
border-right: 3 solid OrangeRed;
font-size: 10px;
font-weight: bold;
background-color: transparent;
border: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-color: #315172;
}

und halt der code in irgendeiner datei.....

z.b wie hier:

<input type=\"text\" name=\"testdb\" size=\"20\">

...normaler weisse sollte es dann transparent sein, ich kann dir ja mal gerne ein beipiel schicken, sollte leicht zu verstehen sein.....

mit freundlichen grüßen

chrono

 

[Gumbo]

Folgendes wäre auch möglich:

input {
	padding:		0.25em;
	color:			#333;
	border:			3px double transparent;
	border-color:		#999 #ccc;
}
input[type="submit"], input[type="reset"] {
	background:		#e8e8e8 url(http://images.google.de/images?q=tbn:zjQvveK19KwJ:www.plumbagomusic.com/wp-images/fade-butt.png) repeat-x scroll 0 0;
}
input[type="text"], input[type="password"] {
	background:		#fcfcfc url(http://images.google.de/images?q=tbn:3pdm6gdcFVAJ:www.hairreplacementreview.com/images/cm-fade.gif) repeat-x scroll 0 0;
}

 

[js-mueller]

Danke schön für die Hilfe.
Das von xChronoX hat perfekt funktioniert