Hoe input en select form element even breed maken?

Vraag me niet echt waarom, maar om een of andere reden worden de verschillende form-elementen niet even breed getoond als je met behulp van CSS een ‘width’ instelt. Het verschil zit hem vooral bij de ‘input’ en ‘select’ elementen. En als je gebruik maakt van padding, komt dit verschil nog duidelijker voor.

Je kan dit eenvoudig oplossen door gebruik te maken van de property en value:

box-sizing: border-box;

Dit zorg ervoor dat ‘width’ niet enkel de breedte van inhoud bepaalt maar ook de volledige content blok inclusief padding en borders.

Probeer maar:

<style type="text/css">
    input, select {width: 200px; box-sizing: border-box;}
</style>

<input type="text">
<br>
<select>
    <option>Keuze 1</option>
    <option>Keuze 2</option>
    <option>Keuze 3</option>
</select>

 

Par Hasard

Ik ben 30+, nader de 40 zelfs, met een gezonde internet verslaving. Gelukkig getrouwd en fiere vader van 2 dochters. Wil een kat in huis, maar mag niet. 🙁

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *