CODEWITHSUNDEEP
htmlcssbuttonsubmit
dennis3678
dennis3678

Reputation: 35

Can't style submit button with css

I am trying to make a flask login screen. Flask requires a type="submit" button. Using CSS to style the button does not work. The same code with type="button" works but then flask does not recognize the request.

<!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 styling

.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;
}

Upvotes: 1

Views: 5181

Answers (3)

Eric
Eric

Reputation: 74

have you tried to ctrl+f5 / clear browser cache ? it seems to be cache issue in this scenario. when you do request from another address, it will pull the latest css instead of referring to browser cache.

Upvotes: 1

Laassari
Laassari

Reputation: 326

your example is working the problem could be somewhere else like another style overriding your style. try changing the background because a white background isn't helping itself

    .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

Upvotes: 0

dennis3678
dennis3678

Reputation: 35

Just found the answer! The problem was that we accessed the site from local host, not the ip! When we accessed the site from ip, the submit button was styled! Can anyone explain why that happens?

Upvotes: 0

Related Questions