时间戳

首页 > 解决方案 > Safari密码建议更改输入框大小

html - Safari密码建议更改输入框大小

问题描述

当我加载我的注册页面时（图 1）。然后单击密码字段（图 2）。Safari 建议输入密码会更改输入大小和字体。

我该如何阻止这种情况发生？

有关更多信息，当我单击关闭密码框或单击“不使用”建议密码时，该框恢复正常大小（图 3）。

图片 1 图片 1

图 2 图 2

图 3 图 3

html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <link rel="stylesheet" href="static/new_style.css">
        <link rel="icon" href="static/images/L.png">
    </head>

    <body>
        <section class="main">
            <div class="main-body">
                <div class="container text-centered">
                {% block content %}
                {% endblock %}
                </div>
            </div>
        </section>
    </body>
</html>


{% extends "base.html" %}

{% block content %}
<div class="form">
    <h3 class="title">Sign Up</h3>
    <div class="box">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
            <div class="notification is-danger">
                {{ messages[0] }}. Go to <a href="{{ url_for('auth.login') }}">login page</a>.
            </div>
        {% endif %}
        {% endwith %}
        <form method="POST" action="/signup">
            <div class="field">
                <div>
                    <input class="input" type="email" name="email" placeholder="Email" required="required" autofocus>
                </div>
            </div>

            <div class="field">
                <div>
                    <input class="input" type="text" name="name" placeholder="Name" required="required">
                </div>
            </div>

            <div class="field">
                <div>
                    <input class="input" type="password" name="password" placeholder="Password" required="required">
                </div>
            </div>
            <div class="field">
                <button class="button">Sign Up</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

CSS:
body{
    font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: black;
}
.main{
    align-items:stretch;
    display:flex;
    flex-direction:column;
    color:#fff;
    min-height:100vh;
}
.main-body{
    padding-bottom:1.5rem;
    padding-top:1.5rem;
    align-items:center;
    display:flex;
    flex-grow:1;
    flex-shrink:1;
    padding:3rem 1.5rem;
}
.text-centered{
    text-align:center!important
}
.form{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width:400px;
    height: 350px
}
.box{
    background-color:#fff;
    border-radius:6px;
    color:#4a4a4a;
}
.title{
    color: #fff;
    font-size:2rem;
    font-weight:600;
    line-height:1.125;
}
.input{
    border:1px solid transparent;
    border-color:#dbdbdb;
    border-radius:4px;
    margin:0;
    padding-bottom:calc(.625em - 1px);
    padding-left:calc(.625em - 1px);
    padding-right:calc(.625em - 1px);
    padding-top:calc(.625em - 1px);
    font-size:1.5rem;
    -moz-appearance:none;
    -webkit-appearance:none;
}
.input:focus, .input:active{
    outline:0;
    border-color:#00FF00;
    box-shadow:0 0 0 .125em rgba(50,115,220,.25)
}
.button{
    align-items:center;
    border-radius:5px;
    height:2.25em;
    border-width:1px;
    cursor:pointer;
    background-color:#209cee;
    color:#fff;
    font-size:1.5rem;
    width: 80%;
}
.button:hover{
    background-color:#1496ed;
    border-color:transparent;
}
.field{
    padding:10px
}
.notification{
    background-color:#f5f5f5;
    border-radius:4px;
    padding:15px;
    position:relative;
}
.notification.is-danger{
    background-color:#ff3860;
    color:#fff
}

标签： htmlcssinputsafaripasswords

解决方案

推荐阅读