Question

以下是一个示例：Select box image

我从数据库获取国家/地区名称并在页面上生成动态选项。现在，我正在显示Html代码（不是数据库代码）。我尝试了很多链接来改变设计（CSS），但没有一个工作在＆＃34;选择＆＃34;。我希望能够更改padding , border, background-color, color或border-color。我是否可以对所有这些进行修改，对于＆＃34;选择＆＃34;，是否使用css？

我还希望仅使用scrollbar在单击按钮时在下拉列表中显示前5个选项（前5个国家/地区名称）。

＆＃13;

#country option:first-child {
    display: none;
}

#country {
    float: left;
    width: 96%;
    color: #fff;
    font-size: 1em;
    font-family: "Calibri";
    margin-left: 5px;
    padding: 8px 0px;
    margin-top: 16px;
    border: 1px solid #00BCEA;
    padding: 9px 5px;
    width: 93%;
    border-radius: 4px;
    color: #00BCEA;
}

＆＃13;

<select id="country">
    <option value="selectOption">Select your country</option>
    <option value="selectOption1">Select your country1</option>
    <option value="selectOption2">Select your country2</option>
    <option value="selectOption3">Select your country3</option>
    <option value="selectOption4">Select your country4</option>
    <option value="selectOption5">Select your country5</option>
    <option value="selectOption6">Select your country6</option>
    <option value="selectOption7">Select your country7</option>
</select>

＆＃13;

Answer 1

您可以尝试以下插件。这将帮助您设置选择框的样式。 select插件将select元素映射到HTML <ul>元素并在其上应用样式。如果检查DOM，则select元素将可见，但在浏览器中隐藏。

希望这会对你有所帮助

谢谢，

如何将更改应用于＆＃34;选择＆＃34;使用CSS的选项

1 个答案: