​

<div class="container align-content-center">

    <br>

    <br>

    <p>This example shows how when a select field is hidden with CSS and then displayed it renders with part of the perimeter of the field covering the label, however using a function on window load to hide the select field allows it to render correctly. To see this happen set field one to "three" to display field two (which will display incorrectly) and set field three to "three" to display field four (which will display correctly).</p>

    <br>

​

    <form action="" method="post" class="form g-3 needs-validation" enctype="multipart/form-data" role="form"

        novalidate>

        <input id="csrf_token" name="csrf_token" type="hidden" value="ImUxZGI4ZjViMjdlZWYxNGIyNTU4Zjk3Y2NmYmRjMTg4M2E4YzMyNjEi.ZNFBOw.OHsWXjVQa30JZDfOmDUqBzW87Qc">

    <div id=field_one_div class="mb-4">

        <select class="select" id="field_one" name="field_one"><option value="one">one</option><option value="two">two</option><option value="three">three</option><option value="four">four</option></select>

        <label class="form-label select-label" for="field_one">Field One</label>

    </div>

    <div id=field_two_div class="mb-4">

        <select class="select" id="field_two" name="field_two"><option value="one">one</option><option value="two">two</option><option value="three">three</option><option value="four">four</option></select>

        <label class="form-label select-label" for="field_two">Field Two</label>

    </div> 

    <div id=field_three_div class="mb-4">

        <select class="select" id="field_three" name="field_three"><option value="one">one</option><option value="two">two</option><option value="three">three</option><option value="four">four</option></select>

        <label class="form-label select-label" for="field_three">Field Three</label>

    </div>     

    <div id=field_four_div class="mb-4">

        <select class="select" id="field_four" name="field_four"><option value="one">one</option><option value="two">two</option><option value="three">three</option><option value="four">four</option></select>

        <label class="form-label select-label" for="field_four">Field Four</label>

    </div>  

    <input id="csrf_token" name="csrf_token" type="hidden" value="ImUxZGI4ZjViMjdlZWYxNGIyNTU4Zjk3Y2NmYmRjMTg4M2E4YzMyNjEi.ZNFBOw.OHsWXjVQa30JZDfOmDUqBzW87Qc">

    </form>

</div>

​