✔ Input-Feld (Textfeld) mit runden ecken?

Status
Nicht offen für weitere Antworten.
T

ten

Grünschnabel
hallo,

ich will ein Textfeld haben, dass nicht vom System vorgegeben ist....es soll runde Ecken haben und einen schwarzen Rand...

...ist das ein Problem?

....das angeheftete Bild zeigt den visuellen Vorschlag

THX & Gruss
ten


/edit: könnt ihr mir evt. genau erklähren wie man das mit CSS macht? Vielen Dank
 

Anhänge

  • 24611attachment.jpg
    24611attachment.jpg
    24,6 KB · Aufrufe: 7.584
Zuletzt bearbeitet:
entweder mit Flash oder mit CSS, mit CSS würde ich z.b. den Rahmen auf 0 setzen und dem Feld einen Hintergrund oder so zuweisen.
 
@ ten: bitte lies die Netiquette Nr.15 und korrigiere deinen Beitrag hinsichtlich der Groß- und Kleinschreibung.

@ topic: dein Vorhaben liesse sich mit einer entsprechenden Hintergrundgrafik realisieren.

Das Thema wandert ins CSS-Board.
 
ten hat gesagt.:
/edit: könnt ihr mir evt. genau erklähren wie man das mit CSS macht? Vielen Dank
Zum Vergrößern anklicken....

CSS: 
input.text_bgImage {
    width: 100px; /* entspricht Grafikbreite */
    height: 20px; /* entspricht Grafikhöhe */
    background: url(bgImage.jpg); /* Hintergrundgrafik */
    border: 0; /* Elementrahmen deaktivieren */
    padding: 0; /* Innenabstand */
}
HTML: 
<input type="text" class="text_bgImage">
Damit der Text in dem Eingabefeld nicht direkt am linken Rand beginnt und am rechten Rand endet, lässt er sich mit der padding-Eigenschaft einrücken. Der gewählte Wert muß dann aber von der Breitenangabe abgezogen werden:

CSS: 
input.text_bgImage {
    width: 90px; /* 90px + 2*5px = 100px, entspricht Grafikbreite */
    height: 20px; /* entspricht Grafikhöhe */
    background: url(bgImage.jpg); /* Hintergrundgrafik */
    border: 0; /* Elementrahmen deaktivieren */
    padding: 0 5px 0 5px; /* Innenabstand oben - rechts - unten - links */
}
 
Jetzt muss ich auch noch mal eine Frage stellen (irgendwie bin ich grad zu doof):

Ich habe die Möglichkeit von Maik gestern ausprobiert, alles schick, genau das was ich gesucht habe! *freu*.

Habe dann meine Test-html-Seite gelöscht und wollte das heute umsetzen -> nichs geht mehr :-(

Slebst bei einer suuuper einfach gestrickten Seite bekomme ich es nicht mehr hin, die input-Box mit einem Hintergrundbild zu versehen und das Original auszublenden..

Kann da jemand man drüberschauen, bitte?

Der Code sieht so aus:

HTML: 
<html>

	<head>
		
		<style type="css/text">
		<!--		  
		input.text_bgImage {
                width: 90px; /* 90px + 2*5px = 100px, entspricht Grafikbreite */
		height: 20px; /* entspricht Grafikhöhe */
		background: url("bgImage.gif"); /* Hintergrundgrafik */
		border: 0; /* Elementrahmen deaktivieren */
		padding: 0 10px 0 10px; /* Innenabstand oben - rechts - unten - links */
		} 
		-->
		</style> 
	
	</head>

	<body bgcolor="#323232" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		
		<input type="text" name="bla" class="text_bgImage" value="Schreib was"> 
	
	</body>

</html>

Die Grafik bgImage.gif ist vorhanden und auch 100*20 groß, liegt im gleichen Verzeichnis.
Wie gesagt, ich hatte schon mal Erfolg, nur leider eben nicht von Dauer...

Vielen Dank schon mal im Voraus!
 
grrr.... ich wollte mir grad ob meiner Blödheit schon an den Kopf schlagen :) solch' offensichtliche Sachen..

ABER: keine Besserung!? :-(
Noch 'ne Idee?
 
Also bei mir wird die Hintergrundgrafik nun dargestellt, wenn auch etwas abgeschnitten, da der Testseite eine Dokumenttypdeklaration fehlt, weshalb die Browser im Quirksmodus laufen und das Boxmodell falsch interpretieren.
 
Hmmm.. Also ich hab's grad auch noch mal an einem anderen Rechner probiert, gleiches Problem (man weiß ja nie)...

Der Code sieht nun mal zum testen so aus:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>box_test</title>
	
	<style type="text/css">
		<!--		  
		input.text_bgImage {
        width: 90px; /* 90px + 2*5px = 100px, entspricht Grafikbreite */
		height: 20px; /* entspricht Grafikhöhe */
		background: url("bgImage.gif"); /* Hintergrundgrafik */
		border: 0; /* Elementrahmen deaktivieren */
		padding: 0 10px 0 10px; /* Innenabstand oben - rechts - unten - links */
		} 
		-->
		</style>
	
	</head>

		<body bgcolor="#323232" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		
		<input type="text" name="bla" value="Schreib was"> 
	
		</body>

</html>

Eagl wo ich das probiere: alles bleibt eckig... (die gif-Datei ist nix weiter als ein weißes Feld 100*20 mit abgerundeten Ecken)... Dieser Code funktioniert so bei dir?

Danke noch/schonmal für deine Spät-am-Abend-Unterstützung :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück