我正在网站上创建一个元素，用户将能够更新工作/订单的状态。

我发现最好的方法是创建一个下拉列表，然后设计它的样式。

超文本标记语言

<select name="status" id="status">
      <option value="Completed">Completed</option>
      <option value="Incomplete">Incomplete</option>
</select>

半铸钢ˌ钢性铸铁(Cast Semi-Steel)

#status {
   width: 100px;
   height: 20px;

   background-color: green;
   color: lightgreen;

   font-size: 18px;
   text-align: center;
}

虽然这一切都很好，我的主要问题是，我希望实际选择框的背景和字体颜色根据选择的选项而改变。即，如果& quot不完整& quot被选中& quot背景色& quot会变成& quot橙色& quot和& quot颜色& quot会变成& quot光珊瑚& quot。

您需要js逻辑来根据选择的值改变样式。

示例:

function updateSelect(e) {
  if (e.value == "Incomplete") {
    e.style.background = 'orange';
    e.style.color = 'lightcoral';
  } else {
    e.style.background = 'green';
    e.style.color = 'lightgreen';
  }
}

#status {
  width: 100px;
  height: 20px;

  background-color: green;
  color: lightgreen;

  font-size: 18px;
  text-align: center;
}

<select name="status" id="status" onchange="updateSelect(this)">
  <option value="Completed">Completed</option>
  <option value="Incomplete">Incomplete</option>
</select>

这应该可行:

option:checked {
 color: lightcoral;
 background-color: orange;
}

编辑: 我写了#status而不是option标签。

注意 这将改变页面上选择的每个选项，要使它只在选择时改变，您必须这样做:

#status > option:checked {
 color: lightcoral;
 background-color: orange;
}

你必须使用一点javascript来完成，也许最简单的方法是为完整和不完整状态添加一个类，这里有一个例子

它只反应当你改变de值，你可以做更多添加一个空的状态，一个预先选定的值，你可以自定义它...这只是一个如何切换类的例子。

祝你好运！

const status = document.getElementById("status");

status.addEventListener("change", () => {
    if (status.value === "Completed") {
    status.classList.add("completed");
    status.classList.remove("not-completed");
  } else {
    status.classList.add("not-completed");
    status.classList.remove("completed");
  }
});

#status {
   width: 100px;
   height: 20px;

   background-color: green;
   color: lightgreen;

   font-size: 18px;
   text-align: center;
}

#status.completed {
  background-color: blue;
}

#status.not-completed {
  background-color: red;
}

<select name="status" id="status">
      <option value="Completed">Completed</option>
      <option value="Incomplete">Incomplete</option>
</select>

您需要使用JavaScript来监听select元素上的change事件，并相应地更新样式。

也许可以尝试这样做:

<select name="status" id="status">
  <option value="Completed">Completed</option>
  <option value="Incomplete">Incomplete</option>
 </select>

CSS:

#status {
  background-color: green;
  color: lightgreen;
}

#status.incomplete {
  background-color: orange;
  color: lightcoral;
}

然后是javascript:

const statusSelect = document.getElementById("status");
statusSelect.addEventListener("change", function() {
  if (this.value === "Incomplete") {
    this.classList.add("incomplete");
  } else {
    this.classList.remove("incomplete");
  }
});

使用Javascript，将更改事件监听器附加到下拉列表并评估值以更改样式将会起作用。下面是通过类名预定义CSS样式的方法。如果你想在下拉菜单中添加更多的选项或者下拉菜单的样式变得更大，这也会使它变得更容易。

我还添加了一个没有值的提示选项作为默认样式。需要，可能不需要，但作为一种选择留了下来。

const statusDropdown = document.querySelector("#status");

statusDropdown.addEventListener("change", (event) => {
  value = statusDropdown.value;
     
  if (value === "Completed") {
    statusDropdown.classList.remove("status-incomplete"); 
    statusDropdown.classList.add("status-complete");
    
  } else if (value === "Incomplete") {
    statusDropdown.classList.remove("status-complete");
    statusDropdown.classList.add("status-incomplete"); 
  } else {
    statusDropdown.className = "";
  }
});

#status {
   width: 100px;
   height: 20px;
   font-size: 18px;
   text-align: center;
}

.status-default {
/*  default styles  */
}

.status-complete {
   background-color: green;
   color: lightgreen;
}

.status-incomplete {
   background-color: orange;
   color: lightcoral;
}

<select name="status" id="status" class="status-default">
      <option value="">Select</option>
      <option value="Completed">Completed</option>
      <option value="Incomplete">Incomplete</option>
</select>

仅使用CSS，您就可以使用has()和:checked对其进行样式化

select {
  background-color: red;
}

select:has(option[value="Completed"]:checked) {
  background-color: green;
  color: yellow;
}

<select name="status" id="status">
  <option value="Completed">Completed</option>
  <option value="Incomplete">Incomplete</option>
</select>