CSS 属性在 Safari 浏览器中不显示效果答案

【问题标题】：CSS properties do not show effect in Safari BrowserCSS 属性在 Safari 浏览器中不显示效果
【发布时间】：2020-12-13 22:46:50
【问题描述】：

我有这段 CSS 代码出现在我测试过的所有其他浏览器上，包括 Firefox 和 Chrome，但由于某种原因，它们没有出现在 Safari 浏览器中。我做错了什么？

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  

  input[type=number], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  

  input[type=button] {
    width: 45%;
    background-color: #3a5cd7;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=button]:hover {
    background-color: #45a049;
  }
  

  div {
    padding: 70px 0;
    text-align: center;
  }

【问题讨论】：

它被覆盖了。这可能会对您有所帮助 stackoverflow.com/a/15286412/12247219

标签： html css safari mobile-safari

【解决方案1】：

看来您必须为 safari 或 firefox 使用其他版本的代码。

Firefox 中 type=number 的示例：

input[type=number] {
  
}

Safari 中 type=number 的示例：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  
     }

我在这里找到这个： Numeric Inputs – A Comparison of Browser Defaults

你只需要寻找其余的输入

【讨论】：