我需要帮助来设置下拉菜单的样式答案

【问题标题】：I need help to style a drop down menu我需要帮助来设置下拉菜单的样式
【发布时间】：2020-11-28 22:41:56
【问题描述】：

我一直在为我的网站制作一个计算器，并且一切正常……直到我在 Safari 中查看它。

在 Chrome 中，我的下拉菜单具有预期的正确样式。但在 Safari 中，它似乎几乎失去了一切。

这是“inputCalc”类的样式，也就是下拉菜单的类：

        .inputCalc{
            width: 60%;
            border: solid 2px black;
            padding: 10px;
            font-family: initial;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 2px;
            font-family: futura-pt;
        }

这是下拉菜单：

<select class="inputCalc" id="ddm" onchange="areaUpdated()">
            <option value="mm">MILLIMETRES</option>
            <option value="cm">CENTIMETRES</option>
            <option value="inch">INCHES</option>
            <option value="m">METRES</option>
</select><br><br>

如果您需要有关此问题的更多详细信息，请告诉我。

还有。下拉菜单与输入框的长度不同，有什么理由会这样吗？（我用这个代码width: 60%;）

提前致谢。

以下是两张图片，我希望它们能让您更容易理解。

【问题讨论】：

请尝试在 safari 上进行硬重载，这有时会出现问题
@khushi，“硬重载”是什么意思。我已经在我的笔记本电脑和手机上查看过它，但我仍然得到相同的结果。
硬重新加载，我的意思是，当您在 safari 上获得结果时，在按顶部搜索栏中的重新加载图标的同时长按 shift 按钮。这会重新加载页面，其中包含有时不会在正常重新加载时出现的详细信息
@SydneyY，好的，我试试看。谢谢
@SydneyY，抱歉，这似乎不起作用

标签： html css

【解决方案1】：

选择框有一些标准化的方面，但它们的外观不是其中之一。

从技术上讲，HTML 我们只是一种标记语言。浏览器将标准化的 JavaScript 添加到某些元素，如表单和输入，但这是一个例外。

每个浏览器都设置自己的默认样式。如果您不想要默认的 Safari 选择框，解决方案是自己显式设置所有 css 属性（或使用这样做的库）。

您必须明确设置背景、边框、高度、宽度、光标等来覆盖浏览器的样式表。我相信您还需要设置选项元素的样式。

例如，我相信这会使所有选择框在 chrome 和 safari 上看起来都一样：

  <style>
    form select, form select:active {
      background-color:black;
      width:250px;
      height:30px;
      padding-left:15px;
      padding-right:5px;
      padding-top:5px;
      padding-bottom:5px;
      margin-top:50px;
      margin-bottom:50px;
      margin-left:auto;
      margin-right:auto;
      border-style: solid;
      border-color: darkslategrey;
      border-width: 2px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      box-shadow: none;
      color:lightgrey;
      font-size: 14px;
      display:inline-block;
      position: relative;
      -webkit-appearance: none;
      appearance: none;
    }
    form select option {
      width:250px;
      height:30px;
      padding-left:15px;
      color:lightgrey;
      background-color: black;
      border-style: none;
      text-transform:uppercase;
    }
  </style>
<form>
  <select>
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
  </select>
</form>

本网站编译了一些样式表，可以帮助您测试事物在其他浏览器中的外观：

https://meiert.com/en/blog/user-agent-style-sheets/

【讨论】：