Question

我有一个自定义样式的CSS类应用于select元素。要求此类保留并应用于网页上的表单元素。但是，网页的其他区域我想放置下拉菜单，默认为浏览器自己渲染下拉菜单的方式，但我不能。自定义风格的选择区域适用于所有选择框，我正在试图解决这个问题。下面是代码，附带的是渲染网页的屏幕抓取，其中显示的代码显示了如何渲染，当我没有表示要包含在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

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

这与你的html或css风格无关。您可以这样说，因为选择框上有jcf-hidden样式（因此它是隐藏的），而您的'检查元素'正在向您显示<span>而不是实际的<select>

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

1 个答案: