Question

底部有一个编辑：

我有这段代码：

<select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="">Select Month</option> 
    <option value='http://www.example.com?m=201512'>
    <span style="text-decoration: underline; color: blue;">
        December 2015 &nbsp;(4)
    </span>
    </option>
</select>

当我使用Firebug检查HTML时，span标记不存在。如果我通过Firefox查看页面源代码，则span开始标记和结束标记将显示为红色，表示出现了问题。

将光标悬停在红色代码上会给我：Stray start tag＆＃34; span＆＃34;

如果我通过验证器运行页面，则不会发现错误。

可能在选项标签???

中不允许使用span标签

但是，为什么验证者没有标记它？

编辑* * * * 关于验证者的NIX THE BIT，我再次看了一眼，发现我正在使用CSS验证器。

我通过标记vaidator运行页面并得到：

错误：错误开始标记范围。

从第273行，第80栏;至第273行，第134栏

m = 201512＆＃39;＆gt;＆lt; span style =＆＃34; text-decoration：underline;颜色：   蓝色;＆＃34;＆GT; Decem

有什么想法吗？

Answer 1

MDN Option:

允许的内容带有最终转义字符的文字（例如é）。

不允许跨度，仅限文本。如果要为文本设置样式，则需要查看不是标准元素的JavaScript / CSS解决方案。

http://www.w3.org/TR/html5/forms.html#the-option-element

Answer 2

span标记在option / select内绝对无效。

将CSS与选择器一起使用

select option.some-class {
    text-decoration: underline;
    color: blue;
}

其中some-class是您为该选项提供类的名称，即;

<option class="some-class">December 2015 &nbsp;(4)</option>

Answer 3

感谢 epascarello 和 worldofjr 解释错误，因为选项标记中不允许使用span标记。似乎选项标签中不允许使用任何标签。

我想到了解决这个问题的方法 -

我正在编码的选项是Wordpress存档月份的列表。函数wp_get_archives（）有一个为每个条目生成选项标签的选项，但是我无法添加到选项标签，以放入我想要的样式。

我希望选择中除第一个选项之外的所有选项都有颜色：蓝色;文字装饰：下划线;游标：指针; （我希望它们看起来像一个链接。我知道它们在悬停或跟随时不会改变颜色，但是蓝色和底部以及指针光标应该会发现它们是链接。）

该函数不会生成select标记，我必须对其进行编码，因此我可以添加它。我把select =“optionSetRules”放在select。

上

我将课程编码为：

.optionSetRules option {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

这将在父类内部使用class =“optionSetRules”

设置选项标签的样式

我在select self中编写了第一个选项，以显示“Select Month”。我不希望这个选项有颜色：蓝色;和文字装饰：下划线;所以我在选项标签中添加了class =“optionSetBlackNoUnderline”，然后添加了这个CSS：

.optionSetBlackNoUnderline{
    color: black;
    text-decoration: none;
    cursor: default;
}

编码给了我想要的东西 - 除第一个之外的选项设置为颜色：蓝色;文字装饰：下划线; cursor：pointer;

现在的问题是，我将哪个答案标记为已接受的答案???

SimonT

获得关于杂散开始标记的错误，我无法弄明白

3 个答案: