我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。

这只会使下拉列表中的选项变灰(因此单击箭头后):

option:first {
    color: #999;
}

问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。

使用此选项会导致所选值始终为灰色(即使在选择实际选项后):

select {
    color: #999;
}

当前回答

纯JavaScript解决方案,允许用户在未选择值时仅通过禁用选项来重置字段。

我不喜欢仅仅禁用该选项的方式(尽管这确实是一个非常简单的解决方案)。但我需要重置选择框。所以我在下面创建了一个简单的JavaScript解决方案。

在HTML代码中,您只需执行以下操作:

<select name="animal">
    <option class="placeholder">Animal</option>
    <option value="1">Mouse</option>
    <option value="2">Cat</option>
</select>

要实现这一点,只需在HTML正文末尾的脚本块中包含以下代码即可。

(function () {
    const selectboxPlaceholderOptions = document.querySelectorAll('select option.placeholder');

    function selectBoxChange(event) {
        const select = event.srcElement;
        const placeholderOption = event.srcElement.querySelector('option.placeholder');
        if (!placeholderOption)
            return;

        if (!select.value || select.value === '') {
            placeholderOption.disabled = true;
            placeholderOption.textContent = placeholderOption.dataset['placeholderText'];
        } else {
            placeholderOption.disabled = false;
            placeholderOption.textContent = '';
        }
    }

    for (let i = 0; i < selectboxPlaceholderOptions.length; i++) {
        const option = selectboxPlaceholderOptions[i];
        const select = option.parentElement;

        option.value = '';
        option.disabled = true;
        option.dataset['placeholderText'] = option.textContent;
        select.addEventListener("change", selectBoxChange);
    }
})();

将类占位符分配给占位符选项后,一切都完成了。JavaScript与页面加载结束前可用的每个选择框一起工作。

其他回答

以下解决方案也适用于Firefox,无需任何JavaScript:

选项[默认值]{显示:无;}<选择><option value=“”默认选择>选择您的年龄</option><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option><option value=“4”>4</option></选择>

您可以在不使用JavaScript和仅使用HTML的情况下执行此操作。您需要将默认的select选项设置为disabled=“”和selected=“”,并选择所需的标记=“”。浏览器不允许用户在未选择选项的情况下提交表单。

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

不需要任何JavaScript或CSS,只需要三个属性:

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

它根本没有显示选项;它只是将选项的值设置为默认值。

但是,如果您只是不喜欢与其他占位符颜色相同的占位符,您可以这样内联修复它:

<!DOCTYPE html>
<html>
    <head>
        <title>Placeholder for select tag drop-down menu</title>
    </head>

    <body onload="document.getElementById('mySelect').selectedIndex = 0">
        <select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"     style="color: gray;    width: 150px;">
          <option value="" hidden>Select your beverage</option> <!-- placeholder -->
          <option value="water" style="color:black" >Water</option>
          <option value="milk" style="color:black" >Milk</option>
          <option value="soda" style="color:black" >Soda</option>
        </select>
    </body>
</html>

显然,您可以将函数和至少select的CSS分离为单独的文件。

注意:onload函数纠正了刷新错误。

在Angular中,我们可以添加一个选项作为占位符,它可以隐藏在选项下拉列表中。我们甚至可以添加一个自定义下拉图标作为背景,代替浏览器下拉图标。

技巧是仅在未选择值时启用占位符css

/**我的组件模板*/

 <div class="dropdown">
      <select [ngClass]="{'placeholder': !myForm.value.myField}"
 class="form-control" formControlName="myField">
        <option value="" hidden >Select a Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

/**我的组件.TS*/

constructor(fb: FormBuilder) {
  this.myForm = this.fb.build({
    myField: ''
  });
}

/**全局.scss*/

.dropdown {
  width: 100%;
  height: 30px;
  overflow: hidden;
  background: no-repeat white;
  background-image:url('angle-arrow-down.svg');
  background-position: center right;
  select {
    background: transparent;
    padding: 3px;
    font-size: 1.2em;
    height: 30px;
    width: 100%;
    overflow: hidden;

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}

我目前无法使用这些选项,因为对我来说(1)不需要,(2)需要返回默认可选选项。因此,如果您使用jQuery,这里有一个很严厉的选项:

var$selects=$('select');$selects.change(函数(){var option=$('选项:默认',this);if(option&&option.is(':selected')){$(this).css('color','#999');}其他{$(this).css('color','#555');}});$selects.each(函数){$(this).change();});期权{颜色:#555;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select name=“in op”><option default selected>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>