Tekst in input opschuiven

Door - Ricardo - op 23-08-2009 21:15

898 views

Hallo allemaal,

Ik heb een achtergrond voor een input:
http://www.tb1servers.com/gebruikersnaambg.png

Ik heb een input:


<input name="gebruikersnaam" type="text" id="gebruikersnaam" value="Gebruikersnaam" onclick="clickclear(this, 'Gebruikersnaam')" onblur="clickrecall(this,'Gebruikersnaam')" />

Ik heb wat css code voor de stijl:


#gebruikersnaam
{
	background-image:url(../images/gebruikersnaambg.png);
	height:23px;
	width:143px;
	border:0;
	background-repeat:no-repeat;
	color:#575757;
	font-family: Tahoma, Arial;
	font-size: 12px;
}

Maar nu gaat de tekst die je intypt over het poppetje in de achtergrond afbeelding heen. Hoe kan ik instellen dat die tekst pas na dat poppetje begint?

Margin en padding ofzo werkt niet want dan schuift dat hele blok op :)

Bvd,
Ricardo

- SanThe -

23-08-2009 21:19

Achtergrond in een div of een span en daarin de input.

- Ricardo -

23-08-2009 21:21

Kan je een input doorzichtig maken dan ofzo :P?

owja gwn de achtergrond kleur meegeven

haha bedankt!

Wouter De Schuyter

23-08-2009 21:22

SanThe schreef op 23.08.2009 21:19
Achtergrond in een div of een span en daarin de input.

Ik zou eerder padding gebruiken, probeer is met deze css?

#gebruikersnaam
{
    background-image:url(../images/gebruikersnaambg.png);
    height:23px;
    width:143px;
    border:0;
    background-repeat:no-repeat;
    color:#575757;
    font-family: Tahoma, Arial;
    font-size: 12px;
    padding-left: 25px;
}

- Ricardo -

23-08-2009 21:29

Ricardo schreef op 23.08.2009 21:15

Margin en padding ofzo werkt niet want dan schuift dat hele blok op :)

Nee dan wordt het een normaal vakje en schuift alles op etc etc :)

Toch bedankt!

Lauren Zonneveld

23-08-2009 21:33

Text-indent kan hier toch prima voor gebruikt worden?

Wouter De Schuyter

23-08-2009 21:36

Ricardo schreef op 23.08.2009 21:29
[quote='Ricardo schreef op 23.08.2009 21:15']

Margin en padding ofzo werkt niet want dan schuift dat hele blok op :)

Nee dan wordt het een normaal vakje en schuift alles op etc etc :)

Toch bedankt![/quote]

Margin moet je idd niet gebruiken, padding kan perfect als je padding-left: 25px; gebruikt maak je de width 25px korter
niets zal veranderen

edit
er zal wel x verandere, de tekst zal niet meer op het mannetje staan xd

Matthias R

23-08-2009 21:41


<html>
<head>
<style type="text/css">
input {text-indent:50px}
</style>
</head>
<body>

<input type="text" />

</body>
</html>

dat zou em moeten doen :)

- Ricardo -

23-08-2009 21:42

Heb het al opgelost met behulp van onze Matthias:


text-indent:25px;

in je CSS

Hulde aan Matthias ;)

Bedankt allemaal!

EDIT: OMG het werkt weer niet in IE

Matthias R

23-08-2009 21:59

nadeel:
werkt niet zo simpel op IE

Wouter De Schuyter

23-08-2009 22:59

Matthias schreef op 23.08.2009 21:59
nadeel:
werkt niet zo simpel op IE

Probeer eens zoals ik het zei, geef padding left mee en trek evenveel af van je width en het zal perfect crossbrowser werken

Reageren

Inloggen om te reageren