Make Placeholder For A Select Box




Here we consider how to Make Placeholder For A Select Box. We have to use CSS and Jquery for making placeholder for Select Box.

Make Placeholder For A Select Box, Make Placeholder For A Combo Box, Placeholder For A Select Box, Placeholder For A Combo Box, Placeholder For A Combo Box Juqery, Placeholder For A Combo Box CSS, Placeholder For A Combo Box Jquery And CSS, Jquery, CSS






In Css region, you can write following style.

#SelectID option
{
        color: black;
}
.placeHolder
{
        color: gray;
}



Here SelectID is the ID of Select Box.
placeHolder is the class that will be applied for Select Box.





On Script part, we have to add following code.

$(function () {
         $("#SelectID").change(function () {
                if ($(this).val() == "0") {
                $(this).addClass("placeHolder");
                }
                 else {
                 $(this).removeClass("placeHolder")
                }
        });
         $("#SelectID").change();
})



On page load we would add the class placeHolder to the first item. Here we listen the change event for Select Box. If the SelectedIndex is Zero, then we append class placeHolder to the Selected Item. Else the Class placeHolder will be removed. Now run your application, you will see a placeholder on Select Box.