html - 我需要帮助来设置下拉菜单的样式

问题描述

我一直在为我的网站制作一个计算器，一切运行良好……直到我在 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%;）

提前致谢。

下面是两张图片，希望能让大家更容易理解。

标签： htmlcss

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

从技术上讲，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/

html - 我需要帮助来设置下拉菜单的样式

问题描述

解决方案

推荐阅读