Beste,

Kan iemand me helpen met een css probleem. Op onderstaande website:
https://decoratiefiguren.be/contact-us
Ziet u onder het formulier de icoontjes staan. Hoe krijg ik deze rechts uitgelijnd naast het invoerveld zelf.
Vind dit niet direct terug.

Alvast bedankt.
Zoals je het nu hebt gedaan lijkt me eigenlijk de moeilijkste oplossing. Dit kun je wel fixen, maar wat eenvoudiger is:
- positioneer de input-group-addon absolute tov de input-group (rechts uitgelijnd), of:
- gebruik een ::after (scheelt je weer een div), of:
- geef op basis van de form-group id een background mee die je op no-repeat zet en rechts positioneert.
Met wat zoeken op de interwebs

https://www.google.com/search?q=icon+in+input+field

en gebaseerd op en geleend van hiero (onderaan de pagina) en wat handleidingen:

https://www.elegantthemes.com/preview/TidalForce/2008/06/03/consequat-ut-lacus-tempus-a-ipsum-amet-proin-ligula-pretium-amet-proin-ligula-pretium/

dit van gebakken :

<style>

#inputleft,
#inputright {
    font-size: 13px;
    background: #f8f7f6;
    border: 1px solid #C9D9F0;
    width: 220px;
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAKIAAAAAAP///9bT0+7u7rm5uY2Njf///wAAACH5BAEAAAYALAAAAAAQABAAAANJaLrRsRAGQsmLjIgtyo2T4ATdl03DYHnYFBSpx4Jimr6m4o44aGkc2ce1KRgLm56ByGmWdCvn67mMNqezpZH3yuq6R0+OwYskAAA7');
    background-repeat: no-repeat;
    height: 30px;
    padding: 6px;
    margin-bottom: 3px;
}

#inputleft {
    padding-left : 30px;
    padding-right: 20px;
    background-position: 3% 6px;
	}

#inputright {
    padding-left : 10px;
    padding-right: 30px;
	background-position: 97% 6px;
	}

</style>

<input id="inputleft"  name="name1" type="text" value="" size="30" maxlength="245" required='required' /><br />
<input id="inputright" name="name2" type="text" value="" size="30" maxlength="245" required='required' />


DataUrlMaker hier : http://dataurl.sveinbjorn.org/#dataurlmaker

Reageren