在 HTML 选择标签选项中设置两个不同元素的样式 - Styling two different elements in the option of HTML select tag

Styling two different elements in the option of HTML select tag

在我的PHP代码中，我从数据库中提取一个包含两列的表，并在下拉列表中显示它们。以下是代码片段：

echo "<select id='isv' class='required'>";
while($row = pg_fetch_row($result)){    
    echo "<option><span class='options'>" . $row[0] . "</span>&nbsp;" . $row[1] . "</option>";
}
echo "</select><br>";

我想通过不同的样式将它们分开。所以我写了下面的 CSS：

.options
{
    color: red;
    float: left;
    text-align: right;
    width: 15em;
    margin-right: 1em;
}

但是，样式未应用于选项。我到底需要在此代码中更改什么？

<option>元素不能以这种方式设置样式，你必须使用JavaScript设计自己的实现。下拉菜单（<select> s）大多由浏览器镶边设置样式，而不是由CSS设置样式。此外，<option>元素可能没有任何子元素。

以下是您可以通过 CSS 进行样式设置的一个很好的参考： http://bavotasan.com/2011/style-select-box-using-only-css/

您可以

~~巧妙地使用margin而不是<span>。（不用说，这行不通）~~

考虑使用一些jQuery插件进行自定义下拉列表。请参阅此处的示例。以及这个SO问题的答案。