How To Change Placeholder Color On Select Field

In this article, We learn about how to add placeholder color in the select field.

For that, we need to create one HTML

<form action="" method="POST" class="select-form">
  <label>Select Technology</label>
  <select class="select-box">
    <option value="">Select....</option>
    <option value="css">CSS</option>
    <option value="html">HTML</option>
    <option value="worpdress">WordPress</option>
    <option value="javascript">Javascript</option>
  </select>
</form>

Add jquery for add and remove class.

Here I use the function because we need to use the same code multiple times.

Here is a small suggestion Please use the function if you need to use the same code multiple times.

jQuery( document ).ready( function($) {
    $( document ).on( 'change', 'select.select-box', function(){
        select_placeholder();
    } );
    select_placeholder();
} );

function select_placeholder() {
  jQuery( 'select.select-box' ).each( function(){
    var select_val = jQuery( this ).val();
    if( select_val != '' ) {
      jQuery( this ).removeClass( 'select-placeholder' );
    } else {
      jQuery( this ).addClass( 'select-placeholder' );
    }
  } );
}

Add this CSS

.select-box {
  width: 100%;
    color: #000;
}
.select-box.select-placeholder {
    color: #f00;
}
.select-box option {
    color: #000;
}

You can change the selected color as per your requirement.

Here is an Output: