Running Flask Python on an OpenSuSE machine and I have this html template, which displays a single-dropdown list and a password field along with a 'Connect' button. I would like to customize the 'Connect' button with my own style, like increasing the font-size or to make the button larger, etc.
<!doctype html>
<html lang="en-US">
{% from "macros/fields.html" import render_text_field %}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style-wifi.css') }}">
<title>Ad Noctem</title>
</head>
<body>
<div class="container1">
<img src="{{ url_for('static', filename='MyLogo.png') }}">
</div>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Select Wi-Fi SSID To Connect To</h3>
<div class="flex-parent jc-center" style="position:relative; left:20px; top:20px;">
{% block content %}
<form name="select_wifi" method="POST" class="form">
<div class="form_container">
{{forms.hidden_tag()}}
{{ render_text_field(forms.mywifi) }}
{{ render_text_field(forms.password) }}
{{ forms.wificonnect(class_="button button--form") }}
</div>
</form>
{% endblock %}
</div>
<div id="mybutton">
<button class="homebutton" onclick="window.location.href = 'index';">HOME</button>
</div>
</body>
</html>
I have this style sheet but the form button is rendered using default style and no matter what I have in the style sheet has any effect on the button style. What am I doing wrong?
html {
background-color: #D9D9DD;
font-size: 12px;
/* font-family: "Courier New", courier-new; */
font-family: "Arial", sans-serif;
}
img {
margin-top:0px;
margin-right:0px;
}
h1 {
color: #0F0F70;
font-size: 50px;
text-align: center;
}
h2 {
color: #0F0F70;
font-size: 30px;
line-height: 2;
letter-spacing: 1px;
text-align: center;
}
h3 {
color: #0F0F70;
font-size: 30px;
line-height: 2;
letter-spacing: 1px;
text-align: center;
}
div.container1 {
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
div.container2 {
text-align: center;
}
ol.myol {
color: black;
display: table;
margin: 0 auto;
text-align: left;
}
li {
font-size: 25px;
font-weight: bold;
line-height: 2;
letter-spacing: 1px;
}
div.flex-parent {
display: flex;
}
div.jc-center {
justify-content: center;
}
button.margin-right {
margin-right: 60px;
}
.pushable {
background: hsl(0deg 0% 36%);
border-radius: 12px;
border: none;
padding: 0;
cursor: pointer;
outline-offset: 4px;
}
.front {
display: block;
width: 300px;
border-radius: 12px;
font-size: 25px;
font-weight: bold;
background: hsl(0deg 0% 46%);
color: black;
transform: translateY(-6px);
}
.pushable:active .front {
transform: translateY(-2px);
}
.homebutton {
background-color: #D9D9DD;
color: black;
font-weight: bold;
padding: 10px 20px;
border-radius: 8px;
border-color: black;
}
#mybutton {
position: fixed;
bottom: -4px;
right: 10px;
}
ol.buttonol {
counter-reset: olCounter;
}
li.buttonli {
counter-increment: olCounter;
margin-bottom: 30px;
}
li.buttonli button::before {
content: counter(olCounter" ". ";
}
.form {
margin: 0 auto;
max-width: 30rem;
border-radius: 12px;
box-shadow: 5px 5px 0 -0.2rem;
background-color: #D9D9DD;
}
.form_container {
padding: 2.5rem 1.5rem 1.5rem 1.5rem;
}
.form_group {
display: flex;
flex-direction: column;
margin-bottom: 1.5rem;
}
.form_label {
margin-bottom: 0.5rem;
}
.form_field {
outline: none;
border: none;
border-bottom: 3px solid #fff;
font-family: "Arial", sans-serif;
padding: 0.75rem 0.5rem;
background-color: #D9D9DD;
}
.form_field:focus {
border-bottom: blue;
}
.button--form {
/* margin: 2rem 0 0 auto; */
padding: 0.75rem 3rem;
border: none;
font-size: 15px;
font-weight: bold;
background-color: #D9D9DD;
}
.button--form:hover {
background-color: #D9D9DD;
font-size: 15px;
font-weight: bold;
}
Any help is greatly appreciated.
-SJ