Question

我正在尝试制作烧瓶登录屏幕。 Flask需要一个type =“submit”按钮。使用CSS来设置按钮的样式不起作用。使用type =“button”的相同代码可以工作，但随后flask无法识别请求。

<!DOCTYPE html>
<html>

    <head>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/style2.css" type="text/css">

    <title>Login</title>
    </head>

    <body oncontextmenu="return false">

        <div class="body"></div>
        <div class="grad"></div>
        <div class="header">
        <div>XOR-<span>House</span></div>
        </div>
        <div class="login">
            <form action = "/login/" method = "POST">
                <p><input type="text" placeholder="Username" name="userid"></p>
                <p><input type="password" placeholder="Password" name="ps"></p>
                <p><input type ="submit" value ="login" ></p>
            </form>
        </div>
        </body> 
</html>

CSS样式

.login input[type=submit]{
    width: 260px;
    height: 35px;
    background: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    border-radius: 2px;
    color: #a18d6c;
    font-family: 'Exo', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 6px;
    margin-top: 10px;
}

.login input[type=submit]:hover{
    opacity: 0.8;
}

.login input[type=submit]:active{
    opacity: 0.6;
}



.login input[type=submit]:focus{
    outline: none;
}

Answer 1

刚刚找到答案！问题是我们从本地主机访问了该站点，而不是ip！当我们从ip访问该网站时，提交按钮的样式！谁能解释为什么会这样？

Answer 2

你的例子正在运作问题可能在其他地方，就像另一种样式覆盖你的风格。尝试改变背景，因为白色背景并不能帮助自己

    .login input[type="submit"] {
    width: 260px;
    height: 35px;
    background: #5bf3e5;
    border: 1px solid #fff;
    cursor: pointer;
    border-radius: 2px;
    color: #a18d6c;
    font-family: "Exo", sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 6px;
    margin-top: 10px;
}

your code on codepen

Answer 3

你尝试过ctrl + f5 /清除浏览器缓存吗？在这种情况下，它似乎是缓存问题。当你从另一个地址发出请求时，它会提取最新的css而不是引用浏览器缓存。

无法使用css样式提交按钮

3 个答案: