生产环境下iOS Safari中Django表单自定义样式未生效求助

实现代码 #

HTML代码 #

<form id="searchForm" method="GET" action="{% url 'search_mountains' %}#search-and-grid">
  {{ form.as_p }}
</form>

CSS样式 #

#searchForm input[type="text"] {
    background-color: rgb(255, 255, 255);
    color: #303030;
    display: inline-block; 
    border: #07A3B2 solid 1.75px;
    padding-left: 7px;
    font-size: 0.65em;
    border-radius: 8px;
    margin-left: 0px;
    cursor: pointer;
    opacity: 0.9;
    width: 150px;
    -webkit-appearance: none;
    -webkit-user-select: text; /* Chrome, Opera, Safari */
    -moz-user-select: text; /* Firefox 2+ */
    -ms-user-select: text; /* IE 10+ */
    user-select: text; /* Standard syntax */
    -moz-appearance: none;
    appearance: none;
}

效果与问题 #

预期样式 #

异常现象 #

• 本地环境、AWS Elastic Beanstalk部署后的桌面端，样式均正常生效
• 本地iOS Safari显示正常，但生产环境下iOS Safari样式失效：
• 仅生产环境的iOS Safari出现该问题，iOS端其他浏览器（如Google Chrome）显示正常

已尝试的排查动作 #

• 将HTML改为直接使用原生input标签，替代Django生成的表单，问题仍存在

内容的提问来源于stack exchange，提问作者richfind