CODEWITHSUNDEEP
htmlcss
user3286482
user3286482

Reputation: 161

Changing color of placeholder in dropdown

You can see the form I'm working on here:

http://www.escalateinternet.com/free-quote.php

This is the code for the drop down budget:

            <td><select id="budget" style="width:420px;">
                <option value="">Choose Your Budget</option>
                <option value="250">$250-$500 Per Month</option>
                <option value="500">$500-$750 Per Month</option>
                <option value="750">$750-$1000 Per Month</option>
                <option value="100">$1000-$1500 Per Month</option>
                <option value="1500">$1500-$2500 Per Month</option>
                <option value="2500">$2500-$5000 Per Month</option>
                <option value="5000">$5000-$7500 Per Month</option>
                <option value="7500">$7500-$10000 Per Month</option>
                <option value="10000">$10,000 or More Per Month</option>
            </select></td>

How can I make it so that "Choose Your Budget" is the same gray colored text as the rest of the placeholders are by default and then when a budget is selected that text is the darker color. I'm just trying to basically make it match the color scheme the rest of the form is using...

Upvotes: 11

Views: 26641

Answers (6)

SaidbakR
SaidbakR

Reputation: 13544

Notice:

After more than six years of the answer, in some browsers, this snippet is no longer run as expected. For example, in current FireFox versions. However, in Opera 70.0.3728.95, it still works.

You can use pseudo class option:checked

<style>
    #budget option:checked{
      color:red;
    }
  </style>

look at this demo: http://jsbin.com/gilip/1

Upvotes: -4

Craig Hodges
Craig Hodges

Reputation: 31

Here's how I did it with the placeholder text color being light gray, normal text white, and background black. The selected option will still be white after focus is moved away.

select {
    color: #fff!important;
    background-color: #000!important;
}
select:invalid {
    color: #535353!important;
}
select:focus {
    color: #fff!important;
}

Upvotes: 3

Jake Bellacera
Jake Bellacera

Reputation: 874

If the dropdown is a required field, you can use the :invalid pseudo-class. According to MDN:

The :invalid CSS pseudo-class represents any <input> or other <form> element whose contents fail to validate.

This means that when the selected option's value is blank (i.e. value=""), the :invalid pseudo-class selector will be active on the <select> element because a value is required. See my example below:

/* 1 - Disable default browser styling */
select {
  border: 1px solid #999;
}

/* 2 - Style default state using the :invalid pseudo-class */
select:invalid {
  color: red;
}
<select name="color" required>
  <option value="" selected>Select a size</option>
  <option value="sm">Small</option>
  <option value="md">Medium</option>
  <option value="lg">Large</option>
</select>

Upvotes: 1

Nicholas
Nicholas

Reputation: 5520

Here is a pure JavaScript way (based on Bill's answer), as there is still no pure html/css way to do this (that I know of).

EDIT: You could set the disabled property on the placeholder option but this is not supported by all browsers AND you can't style the select based on the options attributes.

[].forEach.call(document.querySelectorAll('select'), function(currentSelect) {
  // Trigger placeholder method for the first time
  updatePlaceholder(currentSelect);

  // Bind change event to every select that is found on the page. 
  currentSelect.addEventListener('change', function() {
    updatePlaceholder(this);
  });

});


function updatePlaceholder(select) {
  select.classList.toggle('unselected', !select[select.selectedIndex].value);
}
select.unselected {
  opacity: .5;
  filter: grayscale();
}
<select id="budget" style="width:420px;">
  <option value="">Choose Your Budget</option>
  <option value="250">$250-$500 Per Month</option>
  <option value="500">$500-$750 Per Month</option>
  <option value="750">$750-$1000 Per Month</option>
  <option value="100">$1000-$1500 Per Month</option>
  <option value="1500">$1500-$2500 Per Month</option>
  <option value="2500">$2500-$5000 Per Month</option>
  <option value="5000">$5000-$7500 Per Month</option>
  <option value="7500">$7500-$10000 Per Month</option>
  <option value="10000">$10,000 or More Per Month</option>
</select>

Upvotes: 0

rick
rick

Reputation: 11

Simple way of doing this without using jQuery.

    select {
            color: #aaa; /* default unselected color */
    }

    select:focus {
            color: red; /* color when focused */
    }

    #budget option:checked{
            color: red; /* color when selected but not focused */
    }

Upvotes: 1

Bill
Bill

Reputation: 3517

Possible duplicate of How do I make a placeholder for a 'select' box?

The short of it is, select elements don't support placeholders and what you want to do isn't quite achievable in css. However; some simple JS can help us here.

(I'm assuming you'll using jQuery)

$(document).ready(function(){
    $('select').on('change', function(){ //attach event handler to select's change event. 
                                        //use a more specific selector

        if ($(this).val() === ""){ //checking to see which option has been picked

            $(this).addClass('unselected'); 
        } else {                   // add or remove class accordingly
            $(this).removeClass('unselected');
        }

    });
});

Bonus edit: the if/else block can be refactored into one line (see jquery .toggleClass()) :

$(this).toggleClass('unselected', $(this).val() === "");

I'd also advise giving it the disabled attribute. You can then add styles like this:

select{
    color: black;
}
select.unselected{
    color: gray;
}
//edit: you might want to do this to make it that bit nicer:
select option:first-child{
    display: none;
}

don't forget to give the select element an initial class of unselected.

hope this helps!

Upvotes: 10

Related Questions