<select> html 标签在 chrome 和 safari 中不可见答案

【问题标题】：<select> html tag wont visible same in chrome and safari<select> html 标签在 chrome 和 safari 中不可见
【发布时间】：2021-09-16 08:26:14
【问题描述】：

我正在构建一个反应应用程序并使用选择标签进行多个数据选择但是选择标签工作正常，但此标签的外观存在问题

镀铬外观
在 Safari 中的外观

在这个link 中，它说标签在两种浏览器中都支持。有什么办法可以解决吗

【问题讨论】：

请以minimal reproducible example的形式提供调试详细信息。
潜在重复：stackoverflow.com/questions/7638677/…
这能回答你的问题吗？ How do I style a <select> dropdown with only CSS?

标签： html css reactjs tailwind-css

【解决方案1】：

您可以使用 appearance-none，它是 tailwindCSS 中的一个类，可以删除任何浏览器特定样式。

资源：https://tailwindcss.com/docs/appearance

【讨论】：

【解决方案2】：

是的，老实说，大多数浏览器都有默认样式可供使用。如果你想要一些一致的东西，我经常使用 CSS，请尝试以下操作：

CSS：

/* Reset Select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;

  background: white;
  border:1px solid #e7e7e7;
  background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select */
.select {
  margin:1rem;
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  line-height: 3;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em;
}
select {
  flex: 1;
  padding: 0 .5em;
  color: #ccc;
  cursor: pointer;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #ccc;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}
/* Transition */
.select:hover::after {
  color: #ffffff;
}

html:

<div class="select">
  <select name="slct" id="slct">
    <option selected disabled>Choose an option</option>
    <option value="1">CSS</option>
    <option value="2">JS</option>
  </select>
</div>

【讨论】：

我在我最近的项目中使用了普通的 Css，我现在在这个项目中使用了 tailwind css，并且与