Question

我想让我的HTML <select>和<option>标签变得漂亮，但我也不想远离本机实现。例如，我不想使用dome <div>元素并使用jQuery创建一个下拉列表（出于可访问性的目的）。但是，正如我们所知，HTML <select>真的很难看。

我如何实现这两个要求？在HTML <select>标记及其相关<option>标记上应用样式的好方法是什么？

Answer 1

有一个很好的理由，大多数处理想要设置样式的表单的插件都使用div：

一旦你用任何css触摸任何表单元素，然后是字体大小和边距，事情将开始分崩离析，因为不同的OS＆amp;浏览器组合样式表单元素不同。事情会开始变得错位，你会失去垂直对齐等等......

所以我建议使用div（以及所有可访问性的东西），如果你想搞乱表单元素。

编辑：是的，还有其他一些“安全”的css属性，但这些属性还不足以实现你所描述的内容

Answer 2

真正的诀窍是简单地克服表单和表单控件/标签的用户代理默认样式。如果您针对具有特定样式的不同浏览器，您可以非常接近。这可以快速失控，所以最好知道你在做什么。 formalize是一个很棒的库，可以重置样式并使用大量的JavaScript库。 http://formalize.me/

Answer 3

这是我用来使我的选择下拉菜单看起来更好的方法。我觉得挺好看的。

* {
font-size: 18px;
}

#cars {
    height: 35px;
    background-color: lightgray;
    color: black;
    border: none;
    padding: 5px;
    appearance: none;
    cursor: pointer;
    border-radius: 5px;
    outline: none;
    margin: 5px;
    text-align-last: center;
}

#cars option {
    background-color: white;
    color: black;
}

<!DOCTYPE html>
<html>
<body>
<form>
  <label for="language"><b>Select a coding language:</b></label><br>
  <select name="language" id="cars" required>
    <optgroup label = "Front End">
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
    </optgroup>
    <optgroup label = "Preprocessors">
      <option value="Sass">Sass</option>
      <option disabled>Coming soon</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "action_page.php".</p>

</body>
</html>

我该如何设置HTML“select”和“option”标签的样式

3 个答案: