在定义选项值时设置 Select 字段样式

Question

这个问题延伸至

我接受了 David Thomas 的建议，即只对文本输入字段使用 CSS，而且效果非常好。我已将他的解决方案包含在我的代码中以供参考。

现在，我想将相同的想法扩展到 select 个列表。

我有这段代码，它没有按预期工作：

.field-required
  {border: 1px solid #888;background-color: white;width: 75%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;}

.field-required:placeholder-shown
  {border: 2px solid #023a64;background-color: #d0e9f1;}

.list-required
  {border: 1px solid #888;background-color: white;width: 75%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;}

.list-required option[value="Select"]
  {border: 2px solid #023a64;background-color: #d0e9f1;width: 100%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;}

<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data">
  
  <label for="field">Text Field:</label><br>
  
  <input class="field-required" type="text" name="field" id="field" placeholder="Enter text &hellip;"><br><br>
  
  <label for="list">Select &hellip;</label><br>
  
  <select id="list" name="list" class="list-required">
    <option value="Select" selected>Select &hellip;</option>
    <option value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
  </select><br>

</form>

Answer 1

我已将 required 添加到 Select 标记中，并将 disabled 属性添加到第一个选项中。在 CSS 中，我添加了 select:required:invalid 将背景更改为浅蓝色，我还隐藏了第一个选项

.field-required {
  border: 1px solid #888;
  background-color: white;
  width: 75%;
  border-radius: 6px;
  padding: 4px 8px;
  color: #232856;
  text-align: left;
  font-size: 16px;
  height: 40px;
}

.field-required:placeholder-shown {
  border: 2px solid #023a64;
  background-color: #d0e9f1;
}

.list-required {
  border: 1px solid #888;
  background-color: white;
  width: 75%;
  border-radius: 6px;
  padding: 4px 8px;
  color: #232856;
  text-align: left;
  font-size: 16px;
  height: 40px;
}

select:required:invalid {
  border: 2px solid #023a64;
  background-color: #d0e9f1;
  width: 100%;
  border-radius: 6px;
  padding: 4px 8px;
  color: #232856;
  text-align: left;
  font-size: 16px;
  height: 40px;
}

option[value=""][disabled] {
  display: none;
}

option {
  color: #232856;
  background-color: white;
}

<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data">

  <label for="field">Text Field:</label><br>

  <input class="field-required" type="text" name="field" id="field" placeholder="Enter text &hellip;"><br><br>

  <label for="list">Select &hellip;</label><br>

  <select id="list" name="list" class="list-required" required>
    <option value="" disabled selected>Select &hellip;</option>
    <option value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
  </select><br>

</form>

在定义选项值时设置 Select 字段样式

Making Select Fields Styled when Option Value is Defined

html

javascript

css

select

option