Question

您可以在此处查看我正在处理的表单：

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

这是下拉预算的代码：

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

我如何才能使“选择您的预算”与默认情况下其他占位符的灰色文本相同，然后在选择预算时文本为较暗的颜色。我只是想让它与表格的其余部分使用的配色方案相匹配......

Answer 1

How do I make a placeholder for a 'select' box?

可能重复

缺点是，select元素不支持占位符，而你想要做的事情在css中是不可能完成的。然而;一些简单的JS可以帮助我们。

（我假设您将使用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');
        }

    });
});

奖金编辑：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的初始类。

希望这有帮助！

Answer 2

在不使用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 */
    }

Answer 3

这是我使用占位符文本颜色为浅灰色，普通文本为白色，背景为黑色的方式。焦点移开后，所选选项仍将为白色。

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

Answer 4

这是一种纯JavaScript方式（根据Bill的回答），因为仍然没有纯粹的html / css方式（据我所知）。

编辑：您可以在占位符选项上设置Disabled属性，但是并非所有浏览器都支持此属性，并且您不能根据options属性设置样式。

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

Answer 5

如果下拉列表是 required 字段，则可以使用:invalid伪类。 According to 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>

Answer 6

您可以使用伪类option:checked

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

看一下这个演示：http://jsbin.com/gilip/1

在下拉列表中更改占位符的颜色

6 个答案: