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

标签 javascript html css

我有一个由 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>

关于javascript - 我无法设置由 JavaScript 填充的传统 html 表单下拉菜单的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23193910/

相关文章:

javascript - 如何在Javascript中使用变量来表示数学符号?

javascript - 如何通过浏览器宽度提供不同的 javascript 文件

php - 在另一个字段中输入值时如何更新表单字段

html - 响应式背景图片在移动设备尺寸下无法填满整个页面长度

javascript - 添加文本框和下拉值(数学)

css - HTML 如何将对象保持在同一位置

html - 将加速移动页面与 Bootstrap 结合使用

css - -moz- 样式不适用于附加的 -webkit- 选择器

javascript - 输入 Unresolved 任务

javascript - Meteor contentEditable 字段不起作用