HTML drop-down placeholder

Do you ever wanted to have an HTML drop-down with default selected value (placeholder) that the user cannot re-select once they selected
any valid value options? It can be done easily by adding selected and disabled attributes on the option element.

Code Snippet

<div class="row form-group">                        
    <label class="col-12 pl-0">Status</label>
    <select class="form-control col-12">
        <option value="" selected="selected" disabled="disabled">-- SELECT --</option>
        <option value="ACTIVE">ACTIVE</option>
        <option value="INACTIVE">INACTIVE</option>

Try it!

Leave a Reply