Изменение цвета заполнитель в выпадающем меню

Ответ 1

Вы можете использовать псевдокласс option:checked

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

посмотрите эту демонстрацию: http://jsbin.com/gilip/1

Ответ 2

Возможный дубликат Как сделать placeholder для поля "select" ?

Короче говоря, элементы select не поддерживают местозаполнители, а то, что вы хотите сделать, не вполне достижимо в css. Однако; некоторые простые JS могут помочь нам здесь.

(Я предполагаю, что вы будете использовать jQuery)

$(document).ready(function(){
    $('select').on('change', function(){ //attach event handler to select 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');
        }

    });
});

Бонусное редактирование: блок if/else может быть реорганизован в одну строку (см. jquery .toggleClass()):

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

Я также советую указать атрибут disabled. Затем вы можете добавить такие стили:

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;
} 

не забудьте указать элементу select начальный класс unselected.

надеюсь, что это поможет!

Ответ 3

Простой способ сделать это без использования 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 */
    }

Ответ 4

Вот чистый способ JavaScript (основанный на ответе Билла), поскольку до сих пор нет чистого способа html/css (что я знаю).

EDIT: вы можете установить отключенное свойство в параметре placeholder, но это не поддерживается всеми браузерами. И вы не можете создать стиль, основанный на атрибутах параметров.

[].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>

Ответ 5

Если выпадающее меню является обязательным, вы можете использовать :invalid псевдокласс. Согласно MDN:

:invalid псевдо-класс CSS представляет любой элемент <input> или другой <form>, содержимое которого не может быть проверено.

Это означает, что, когда выбранное значение параметра пусто (т.е. value=""), :invalid селектор псевдокласса будет активен в элементе <select> потому что требуется значение. См. Мой пример ниже:

/* 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>