Select-Dropdown

The main concept of this demo is no placeholder attribute in ‘select’ tag but it can make the placeholder for a ‘select’ box.
I am using placeholders for text inputs . But I’d like to use a placeholder for my selectboxes.

I am creating a class like option[value=””][disabled] in that i used a property called display:none; if the property is disabled, its value will be either true or false.i like to write selected disabled in the first option so that the first value will disable when we click real options.

I am creating some properties like color:#516a8a; for the placehloder and color: #444; for the real options.and when we click the real options its color is #fff. using a transparent as background , outline:none; height:35px ;and border: 1px solid #516a8a; for the select option.

option[value=""][disabled] {
display:none;
}
 select:invalid {
 color:#516a8a;
 }
 select option {
 color: #444;
  }
 select{
  border: 1px solid #516a8a;
  background: transparent;
  outline:none;
  height:35px;
 }
select:valid {
color:#fff;
}
<div style="background: rgba(3, 41, 90, 0.8);display: inline-block;padding: 100px;">
  <div style="background:#03295a;display: inline-block;padding: 50px;">
  <select required>
   <option value="" selected disabled>Select your option</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Sapota">Sapota</option>
    <option value="Banana">Banana</option>
  </select>
  </div>
</div>

When the select element is required it allows use of the :invalid CSS class which allows you to style the select element when in it’s “placeholder” state. :invalid works here because of the empty value in the placeholder option.
so,that selected value always being disable when we selecting a real option

This method is working in the following browsers like,
Google Chrome,Mozilla Firefox,Safari ,Microsoft Internet Explorer – v.11

Leave a Reply

Your email address will not be published. Required fields are marked *