Question

我正在尝试将选择标记中的第一个选项（业务类型）的颜色更改为灰色，以使其看起来像文本字段的占位符文本。我尝试了几种无效的方法。用HTML和CSS可以简单地做到这一点吗？

    <select id="businesstype">
        <option value="" disabled selected hidden>Business Type</option>
        <option value="">Restaurant</option>
        <option value="">Hotel</option>
        <option value="">Café</option>
        <option value="">Shop</option>
        <option value="">Services Agency</option>
        <option value="">NGO</option>
        <option value="">Institution</option>
    </select>

Answer 1

这应该有效：

#businesstype div[disabled] {
    opacity: 0.5;
}

还可以检出：https://www.w3schools.com/css/css_attribute_selectors.asp

Answer 2

定位选择以更改selected的颜色样式。
然后，从此选择中定位所有选项，以重置其继承的颜色。

#businesstype {
  color: gray;
}

#businesstype option {
  color: black;
}

<select id="businesstype">
  <option value="" disabled selected hidden>Business Type</option>
  <option value="">Restaurant</option>
  <option value="">Hotel</option>
  <option value="">Café</option>
  <option value="">Shop</option>
  <option value="">Services Agency</option>
  <option value="">NGO</option>
  <option value="">Institution</option>
</select>

Answer 3

$readParams=@{}
if("2".Equals("2")) {
  $readParams["AsSecureString"]=$true
}
read-host 'Prompt' @readParams

Answer 4

在选择标记中添加必填项，然后点赞

  <select class="form-control form-item__element--select" required>
                      <option  disabled value="">Business Type*</option>
                       <option value="">Restaurant</option>
                       <option value="">Hotel</option>
                       <option value="">Café</option>

在CSS中

.form-item__element--select [disabled] {
  color: #DEDEDE;
  font-weight: 600;
  font-size: 16px;
   }
.form-item__element--select:invalid {
   color: #DEDEDE;
   font-weight: 600;
   font-size: 16px;
  }

Answer 5

您可以通过添加以下CSS来做到这一点，

#businesstype option[disabled]:first-child {
    color: gray;
}

如何更改Select标记中占位符选项的颜色？

5 个答案: