如何为“选择”框创建占位符？

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

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

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

这只会使下拉列表中的选项变灰（因此单击箭头后）：

option:first {
    color: #999;
}

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

使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：

select {
    color: #999;
}

当前回答

我遇到了同样的问题，在搜索时我遇到了这个问题，在我找到了一个好的解决方案后，我想和你们分享一下，以防有人从中受益。

这里是：

HTML格式：

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS:

.place_holder {
    color: gray;
}
option {
    color: #000000;
}

JavaScript：

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

在客户进行第一次选择后，不需要灰色，因此JavaScript代码删除了place_holder类。

多亏了@user1096901，作为Internet Explorer浏览器的解决方案，您可以再次添加place_holder类，以防再次选择第一个选项：）

2014-08-11 05:00:29

其他回答

这里有一个工作得很好的CSS解决方案。内容被添加（并且相对于容器绝对定位）在包含元素之后（通过：在伪类之后）。

它从我使用指令时定义的占位符属性（attr（占位符））中获取文本。另一个关键因素是指针事件：无-这允许单击占位符文本传递到选择。否则，如果用户单击文本，它不会下降。

我自己在select指令中添加了.empty类，但通常我发现angular为我添加/删除.ng是空的（我认为这是因为我在代码示例中注入了1.2版本的angular）。

（示例还演示了如何在AngularJS中包装HTML元素以创建自己的自定义输入）

2017-06-08 22:12:50

在这里，我修改了大卫的答案（接受的答案）。在他的回答中，他将禁用和选定属性放在选项标签上，但当我们也放置隐藏标签时，它看起来会更好。

通过在选项标签上添加额外的隐藏属性，它将防止在选择“Durr”选项后重新选择“Select your option”选项。

<选择><option value=“”disabled selected hidden>选择您的选项</option><option value=“hurr”>Durr</option></选择>

2018-05-06 14:40:07

好的，在我的案例中，有一个很有用，它的特点（与公认的答案相反）：

如果是占位符，则为灰色不需要选择能够变回灰色（值=“”）没有外部库（jquery等）

如果值不是“”，则需要一个小JS函数将其更改为灰色/黑色。注释中解释了JS。。没有注释，只有几行代码。通过将其放在函数中，它将适用于该类的所有复选框。。

函数checkSelectboxes（）{//选中所有复选框，这里我根据类名选择这样做let selectboxes=document.querySelectorAll（'.form select'）；//循环浏览所有复选框（这次只有一个）selectboxes.forEach（sb=>{//将eventlistener添加到每个复选框sb.addEventListener（'change'，函数（e）{//如果此复选框的值不是“”，则添加类，否则：删除它。e.target.value=="" ? e.target.classList.add（'changed'）：e.target.cclassList.remove（'changed'）；})})}//调用函数checkSelectboxes（）；.表单选择{颜色：#ccc；}.form-select已更改{颜色：#000}.form选择选项{颜色：#000；}.form select选项：第一个类型{颜色：#ccc；}<select type=“text”class=“form select”><option value=“”selected>--我的占位符--</option><option>1 lorem--</option><option>2ipsum--</option><option>3多尔--</option></选择>

2022-04-19 12:56:19

如果使用的是Angular，请执行以下操作：

<选择><option[ngValue]=“undefined”disabled selected>选择您的选项</option><option[ngValue]=“hurr”>Durr</option></选择>

2018-08-29 09:06:54

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

2019-01-26 12:10:24

如何为“选择”框创建占位符？

推荐文章

最新文章

标签