2020 April

CSS (fake) placeholder text for select elements

For now, there is no placeholder attribute available for HTML select elements what is really bad if you need to achive some kinda reduced form styling, without field labels and stuff.

HTML Select element with fake placeholder
Example form with placeholder style select label

But there is a workaround, we have to add the label as the first option with a value=““. Now we want to style it like the other placeholder texts. To do so we need just a little JS & CSS:

      var $placeholderSelects = $('form select');
      if($placeholderSelects.children().first().is(':selected')){
        $placeholderSelects.addClass('select-placeholder-option-active');
      }else{
        $placeholderSelects.removeClass('select-placeholder-option-active');
      }
      $placeholderSelects.on('change', function(){
        if($(this).children().first().is(':selected')){
          $(this).addClass('select-placeholder-option-active');
        }else{
          $(this).removeClass('select-placeholder-option-active');
        }
      });

The JS ensures that we just have the placeholder style / color, if the first value is selected. (Yes, i better should put this in a function …)

select{
  &.select-placeholder-option-active{
    color: $input-placeholder-color;
    > option:not(:first-child){
      color: $input-color;
    }
  }
}