以下是HTML中选定选项的代码:
<!DOCTYPE html>
<html>
<head>
<style>
.Orange{color:Orange;}
.Red{color:Red;}
.Green{color:Green;}
</style>
</head>
<body>
<SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px; '>
<OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED>
<OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red' >Red
<OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green
<OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange
<OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT>
</body>
</html>
但是我想在Selected标签中使用样式以及字体大小和族。但如果我这样做,颜色样式不起作用。 我这样想;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px; .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>
<OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED>
<OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red' >Red
<OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green
<OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange
<OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT>
</body>
</html>
有什么想法吗?
答案 0 :(得分:2)
style
属性使用不正确。
这就是你所拥有的:
<SELECT id='select'
NAME='select'
class="form-select"
OnChange='this.className=this.options[this.selectedIndex].className'
style='font-family : Arial; font-size : 10px;
.Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>
您只能在style
属性中插入样式。您包括选择器(类)。那是无效的。
style属性的值必须与内容的语法相匹配 一个CSS声明块(不包括分隔括号)。
使用文档的head
部分或外部样式表来定义选择器。
<head>
<style>
.Orange{color:Orange;}
.Red{color:Red;}
.Green{color:Green;}
</style>
</head>
答案 1 :(得分:2)
保留<head><style>
标记中颜色的样式。您不能使用元素的style
属性来定义CSS类。字体系列等将从父元素继承,因此<option>
将继承<select>
中的字体。
答案 2 :(得分:2)
首先,Style属性内联html标记未正确使用
如果你想使用类,那么使用其他类型的CSS,如内部和外部
您不使用内联样式属性中的类
<SELECT id='select'
NAME='select'
class="form-select"
OnChange='this.className=this.options[this.selectedIndex].className'
style='font-family : Arial; font-size : 10px;
.Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>
但您可以使用以下方法
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.Orange{color:Orange;}
.Red{color:Red;}
.Green{color:Green;}
</style>
</head>
<body>
<SELECT id='select'
NAME='select'
class="form-select Orange Red Green"
OnChange='this.className=this.options[this.selectedIndex].className'
style='font-family : Arial; font-size : 10px;'>
</body>
</html>
答案 3 :(得分:1)
在样式标记中,您不能包含类:
style='font-family : Arial; font-size : 10px; .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'
这就是它无法正常工作的原因。
<!DOCTYPE html>
<html>
<head>
<style>
.Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}
</style>
</head>
<body>
<SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px;'>
<OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED>
<OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red' >Red
<OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green
<OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange
<OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT>
</body>
</html>
尝试添加,如代码段所示。