Goedemiddag,

Ik zoek een oplossing voor het volgende: Ik heb een input veld, dit veld gebruikt een achtergrond afbeelding welke op repeat-x staat. Als dit veld verplicht is dan komt er een icoontje in het veld. Hoe is dit het beste op te lossen?

Ik dacht zelf aan #div waar de input instaat, waarbij je de #div styled. Heeft iemand een beter idee?

Ontwerp: diepsloot.nl/voorbeeld-field.jpg

Alvast bedankt.

Makkelijke oplossing is de border-right van het input veld op none te zetten. Vervolgens naast de input het plaatje en dan daarvan border-links op none zetten.

dus bijv

Code:

<label>Naam :</label>
<input id="verplicht" name="naam" size="30" type="text"><img src="verplicht_veld.jpg">

En als al je gebruikers gewoon een up to date browser gebruiken kun je met CSS ervoor zorgen dat je automatisch het <img> gedeelte krijgt (d.m.v :after en content ="...")

Je zou ook het plaatje een negatieve margin links kunnen geven zodat het over het input veld heen valt en dan hoef je niets met de borders te doen.

Er zijn vast nog wel meer oplossingen, maar kom ik zo even niet op :)

Succes!

Ik zou het input element stylen, bijvoorbeeld:

Code:

input#naam { background-color: #FFF; background-image: url(plaatje.png); background-position: 3px 1.5px; background-repeat: no-repeat; height: 22px; margin: 0; padding: 2px 0 0 30px; width: 120px; }

Goed idee Fabien! Ik gebruik een list (ul) om het formulier te ordenen, dan kan ik inderdaad in de li het plaatje zetten met een negatieve linker margin. Oplossing komt dus in principe neer op het zelfde om een #div om het veld te zetten.

Zou je deze oplossing eventueel kunnen uitleggen:

after en content ="..."

Begrijp niet helemaal wat je hier probeert.

Bedankt!

Padding geven
Border van die kleur en de plus als background


Zal even kijken of ik het snel voor elkaar kan krijgen


EDIT: Nog ff andere dingen tussen door maar zo moet het ongeveer

Finetunen moet je zelf even doen

Code:

    input {
        border: 1px solid #e6e6e6;
        color: #95999a;
        background: url(plus.jpg) 254px 14px no-repeat;
        width: 250px;
        height: 40px;
        padding-right: 30px;
    }

Bedankt voor de oplossing, welke zou werken als de achtergrond van het veld geen background had. Deze heeft namelijk nog een licht grijze pixel onder de top-border.

PHP Code:


#page fieldset ul li input    {width:233px; background:url(images/field-bg.gif) repeat-x #fff; padding:10px 35px 10px 10px; font-size:11px; color:#70797e; border:1px #e6e6e6 solid;}
#page fieldset ul li span.required    {width:15px; height:15px; background:url(images/icon-plus-bg.gif); position:absolute; top:10px; right:30px;} 


Waarbij ik de <li> op position:relative; heb staan.

Kan gesloten worden, bedankt!