How to style WTForm fields using custom css classes? - html

Question

I have created a simple form like:
class PostForm(FlaskForm):
# for posting a new blog
title = StringField("Title", validators=[DataRequired()])
submit = SubmitField('Post')
And my HTML for the form looks like this:
<div class="post-project-fields">
<form method="POST" action="">
{{ form.hidden_tag() }}
<div class="row">
<div class="col-lg-12">
<!-- <input type="text" name="title" placeholder="Title"> -->
{{ form.title.label }}
{{ form.title }}
</div>
<div class="col-lg-12">
<ul>
<!-- <li><button class="active" type="submit" value="post">Post</button></li> -->
{{ form.submit }}
<li>Cancel</li>
</ul>
</div>
</div>
</form>
</div><!--post-project-fields end-->
The CSS styling for the class post-project-fields looks like:
.post-project-fields {
float: left;
width: 100%;
padding: 30px 20px;
background-color: #121212;
}
.post-project-fields form {
float: left;
width: 100%;
}
.post-project-fields form input {
padding: 0 15px;
height: 40px;
}
.post-project-fields form ul li button,
.post-project-fields form ul li a {
color: #000000;
font-size: 16px;
border: 1px solid #e5e5e5;
padding: 10px 25px;
display: inline-block;
background-color: #d7d7d7;
font-weight: 600;
cursor: pointer;
}
As the css class is like this, it is not styling the way I want, which is how it would look if I used HTML forms only (Only using the commented out lines from the HTML section.)
How do I get the specified styling under the CSS class to be added to the wtforms field?

Answer 1

The elements that are generated by wtforms are different from those you were initially rendering. Some of your css selectors target elements that don't exist on the page anymore.
For example you used a button for submitting the form before
<li><button class="active" type="submit" value="post">Post</button></li>
and you have a selector that targets this: .post-project-fields form ul li button, but
{{ form.submit }}
# renders
<input id="submit" name="submit" type="submit" value="Post">
So create a selector that targets the input instead.
You could also make a more generic selector that targets any element that has a type attribute of value "submit"
[type="submit"] {
color: #000000;
font-size: 16px;
border: 1px solid #e5e5e5;
padding: 10px 25px;
display: inline-block;
background-color: #d7d7d7;
font-weight: 600;
cursor: pointer;
}
Inspect the generated elements in the browser and create your styles around that.