zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Icon im Input

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.05.2009, 06:19
.bara {height:178cm;}
neuer user
Thread-Ersteller
 
Registriert seit: 15.05.2009
Ort: Bad Harzburg
Beiträge: 3
Bara befindet sich auf einem aufstrebenden Ast
Standard Icon im Input

Hallo allerseits

Ich möchte via CSS etwas mein Kontaktformular aufbessern.
Dazu möchte ich die Eingabefelder mit einem Icon versehen.

Ich habe dies mal grafisch im Paint zusammengestellt, wie ich mir das vorstelle:


So sollte das aussehen, nun fehlt mir jeder Ansatz dies in meiner CSS-Datei zu realiseren.

Vielen Dank für Hilfe
Jörg
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.05.2009, 06:32
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Mach ein Kästchen (<div>) mit einem Rand, gib dem das Hintergrundbild "Stift", dann lege das
<input> rechts daneben.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.05.2009, 07:02
.bara {height:178cm;}
neuer user
Thread-Ersteller
 
Registriert seit: 15.05.2009
Ort: Bad Harzburg
Beiträge: 3
Bara befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Antwort

Das ganze wäre etwas umständlich, da ich diese Umsetzung auf einem Portal durchführe welches eine Vielzahl von Formularen hat (Registrierung, Passwort ändern, Profil etc.)

Ich habe es allerdings doch via CSS hinbekommen, habe einfach ein wenig rum experementiert.

Das Ergebnis in der CSS:
Code:
.stift {
	padding:			4px 0px 0 23px;
	font-size:			11px;
	border-bottom:		1px #38afc8 dotted;
	background:		white url('../icon/stift.png') no-repeat 3px 3px;
	height:			16px;
	width:			200px;
}
und das Formularfeld dann

HTML-Code:
<input class="stift" type="text">
Mit Zitat antworten
  #4 (permalink)  
Alt 15.05.2009, 07:05
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Du hast recht. Deine Lösung ist kleiner, also besser.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Input Radio Cybertronic (X)HTML 5 15.03.2010 23:35
input feld + submit button auf gleicher höhe. funktioniert außer in IE8 + FF2+3 monran CSS 4 04.12.2009 09:07
Kein line-height auf input in Firefox 3? o.dey CSS 4 09.01.2009 14:57
Icon vor Link | wenn Zeilenumbruch verschwindet Icon NicolaibassDH CSS 0 28.03.2007 14:14
Probleme mit Input Feldern Thorin CSS 4 06.06.2006 16:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:17 Uhr.