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>