我无法设计由JavaScript填充的传统html表单下拉菜单的样式

I cannot style a traditional html form drop down menu which is filled by JavaScript

本文关键字：传统 html 表单 样式 下拉菜单 填充 JavaScript      更新时间：2023-09-26

我有一个由JavaScript填充的下拉菜单。我想设计下拉列表中的元素，但不知怎么的，我尝试的都不起作用。有人有什么建议吗？

<form action="" method="post">
    <div class="cddp">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Category</option>
</select>
&nbsp;
<select name='List2' onchange="getValue(this.value,this.form['List1'].value)">
<option selected >Subcategory</option>
</select>
</div>

它的CSS：

.cddp{
    color: red;
}

这里我分享了一个简单的例子：

<!DOCTYPE html>
<html>
<head>
<style>
.cddp{
    color: red;
}
.cddp select{
    color: green;
}
</style>
<script>
function favBrowser()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>
<div class="cddp">
Select your favorite browser:
<select id="myList" onchange="favBrowser()">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>  
  <option>Internet Explorer</option>
  <option>Safari</option>
  <option>Opera</option>
</select>
</div>
<p>Your favorite browser is: <input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>

.cddp将与select元素的父div匹配。您希望将.cddpdiv中的select元素作为目标。您可以使用空间来定位元素的子体：

.cddp select {
    color: red;
}

Fiddle演示

您需要在CSS选择器中指定select元素，因此对于您的示例：

.cddp select {
    color: red;
}

以（直接）在cddp类元素内选择任何CCD_ 6元素。或者将类移动到SELECT元素。

相关文章：