Question

在我的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;
}

但是，样式未应用于选项。我在这段代码中究竟需要更改什么？

Answer 1

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

以下是您通过CSS 风格的一个很好的参考：http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 2

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

考虑使用一些jQuery插件进行自定义下拉。查看示例here。以及这个SO question的答案。

在HTML选择标记选项中设置两个不同元素的样式

2 个答案: