html - 如何将自定义样式的下拉列表默认为浏览器默认样式的下拉列表

Question

我有一个自定义样式的 CSS 类应用于选择元素。要求此类保留并应用于网页上的表单元素。但是，网页的其他区域我想放置默认为浏览器自己呈现下拉菜单的方式的下拉菜单，但我不能。自定义样式的选择区域适用于所有选择框，我正在努力解决这个问题。下面是代码，附件是呈现网页的屏幕抓取，其中公开了代码以显示这是如何呈现的，从而在我没有表示将其包含在 HTML 代码中时添加类“选择区域”。

HTML:

<div>
 <label><strong class="tool-question">Select a table</strong>
  <select name="2" class="tool-input-select" id="2">
   <option value="Select">Select</option>
   <option value="Option One" selected>Option One</option>
   <option value="Option Two" selected>Option Two</option>
  </select>
 </label>
</div>

CSS:

.tool-input-select {
    margin: 3px 0 6px 0 !important;
    color: #101010 !important;
    border: 1px solid #abadb3 !important;
    padding: 5px !important;
    font-size: 1.200em !important;
}

请参阅所附链接以获取 HTML 的渲染屏幕截图: screen grab here

提前致谢!

尼克

Answer 1

在我看来，您使用的是第 3 方 javascript 库，它会自动将所有选择框转换为您在页面加载时获得的自定义样式外观。我的建议是一个一个地删除每个 javascript 库以找到罪魁祸首(通过查看呈现的样式 <select> ，我会说它是 JCF)。

这真的与您的 html 或 css 样式无关。您可以看出这一点，因为选择框有一个 jcf-hidden它的样式(所以它是隐藏的)，你的“检查元素”向你展示了一个<span>而不是实际的 <select>