According to Mozilla Dev Network, placeholder
is not a valid attribute on a <select>
input.
Instead, add an option with an empty value
and the selected
attribute, as shown below. The empty value
attribute is mandatory to prevent the default behaviour which is to use the contents of the <option>
as the <option>
's value.
<select>
<option value="" selected>select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select>
In modern browsers, adding the required
attribute to the <select>
element will not allow the user to submit the form which the element is part of if the selected option has an empty value.
If you want to style the default option inside the list (which appears when clicking the element), there's a limited number of CSS properties that are well-supported. color
and background-color
are the 2 safest bets, other CSS properties are likely to be ignored.
In my option the best way (in HTML5) to mark the default option is using the custom data-*
attributes.1 Here's how to style the default option to be greyed out:
select option[data-default] {_x000D_
color: #888;_x000D_
}
_x000D_
<select>_x000D_
<option value="" selected data-default>select your beverage</option>_x000D_
<option value="tea">Tea</option>_x000D_
<option value="coffee">Coffee</option>_x000D_
<option value="soda">Soda</option>_x000D_
</select>
_x000D_
However, this will only style the item inside the drop-down list, not the value displayed on the input. If you want to style that with CSS, target your <select>
element directly. In that case, you can only change the style of the currently selected element at any time.2
If you wanted to make it slightly harder for the user to select the default item, you could set the display: none;
CSS rule on the <option>
, but remember that this will not prevent users from selecting it (using e.g. arrow keys/typing), this just makes it harder for them to do so.
1 This answer previously advised the use of a default
attribute which is non-standard and has no meaning on its own.
2 It's technically possible to style the select itself based on the selected value using JavaScript, but that's outside the scope of this question. This answer, however, covers this method.
No need to take any javscript or any method you can just do it with your html css
HTML
<select id="myAwesomeSelect">
<option selected="selected" class="s">Country Name</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
Css
.s
{
color:white;
font-size:0px;
display:none;
}
<select>
<option value="" disabled selected hidden> placeholder</option>
<option value="op1">op1</option>
<option value="op2">op2</option>
<option value="op3">op3</option>
<option value="op4">op4</option>
</select>
There is a Select2 plugin allowing to set a lot of cool stuff along with placeholder. It is a jQuery replacement for select boxes. Here is an official site https://select2.github.io/examples.html
The thing is - if you want to disable fancy search option, please use the following option set.
data-plugin-options='
{
"placeholder": "Select status",
"allowClear": true,
"minimumResultsForSearch": -1
}
Especially I like the allowClear option.
Thank you.
This my function for select box placeholder.
HTML
<select name="country" id="country">
<option value="" disabled selected>Country</option>
<option value="c1">England</option>
<option value="c2">Russia</option>
<option value="c3">USA</option>
</select>
jQuery
jQuery(function($) {
/*function for placeholder select*/
function selectPlaceholder(selectID){
var selected = $(selectID + ' option:selected');
var val = selected.val();
$(selectID + ' option' ).css('color', '#333');
selected.css('color', '#999');
if (val == "") {
$(selectID).css('color', '#999');
};
$(selectID).change(function(){
var val = $(selectID + ' option:selected' ).val();
if (val == "") {
$(selectID).css('color', '#999');
}else{
$(selectID).css('color', '#333');
};
});
};
selectPlaceholder('#country');
});
<select>
<option selected="selected" class="Country">Country Name</option>
<option value="1">India</option>
<option value="2">us</option>
</select>
.country
{
display:none;
}
</style>
Try this
HTML
<select class="form-control"name="country">
<option class="servce_pro_disabled">Select Country</option>
<option class="servce_pro_disabled" value="Aruba" id="cl_country_option">Aruba</option>
</select>
CSS
.form-control option:first-child {
display: none;
}
<select>
<option disabled selected>select your beverage</option>
<option >Tea</option>
<option>coffee</option>
<option>soda</option>
</select>
Yes it is possible
You can do this using only
HTML
You need to set default select optiondisabled=""
andselected=""
and select tagrequired=""
. Browser doesn't allow user to submit the form without selecting an option.
<form action="" method="POST">
<select name="in-op" required="">
<option disabled="" selected="">Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="submit" value="Submit">
</form>
Source: Stackoverflow.com