Bootstrap Select Dropdown List Placeholder
Answer :
Yes just "selected disabled" in the option.
<select> <option value="" selected disabled>Please select</option> <option value="">A</option> <option value="">B</option> <option value="">C</option> </select>
Link to fiddle
You can also view the answer at
https://stackoverflow.com/a/5859221/1225125
Use hidden:
<select> <option hidden >Display but don't show in list</option> <option> text 1 </option> <option> text 2 </option> <option> text 3 </option> </select>
dropdown or select doesn't have a placeholder because HTML doesn't support it but it's possible to create same effect so it looks the same as other inputs placeholder
$('select').change(function() { if ($(this).children('option:first-child').is(':selected')) { $(this).addClass('placeholder'); } else { $(this).removeClass('placeholder'); } });
.placeholder{color: grey;} select option:first-child{color: grey; display: none;} select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control placeholder"> <option value="">Your Placeholder Text</option> <option value="1">Text 1</option> <option value="2">Text 2</option> <option value="3">Text 3</option> </select>
if you want to see first option in list remove display property from css
Comments
Post a Comment