title: How to style WTForm fields using custom css classes?
body: <p>I have created a simple form like:</p>
  <pre><code>class PostForm(FlaskForm):
      # for posting a new blog
      title = StringField(&quot;Title&quot;, validators=[DataRequired()])
      submit = SubmitField('Post')
  </code></pre>
  <p>And my HTML for the form looks like this:</p>
  <pre><code>&lt;div class=&quot;post-project-fields&quot;&gt;
      &lt;form method=&quot;POST&quot; action=&quot;&quot;&gt;
          {{ form.hidden_tag() }}
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-lg-12&quot;&gt;
                  &lt;!-- &lt;input type=&quot;text&quot; name=&quot;title&quot; placeholder=&quot;Title&quot;&gt; --&gt;
                  {{ form.title.label }}
                  {{ form.title }}
              &lt;/div&gt;
              &lt;div class=&quot;col-lg-12&quot;&gt;
                  &lt;ul&gt;
                      &lt;!-- &lt;li&gt;&lt;button class=&quot;active&quot; type=&quot;submit&quot; value=&quot;post&quot;&gt;Post&lt;/button&gt;&lt;/li&gt; --&gt;
                      {{ form.submit }}
                      &lt;li&gt;&lt;a href=&quot;/&quot; title=&quot;&quot;&gt;Cancel&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;&lt;!--post-project-fields end--&gt;
  </code></pre>
  <p>The CSS styling for the class <strong>post-project-fields</strong> looks like:</p>
  <pre><code>.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;
  }
  </code></pre>
  <p>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 (<strong>Only using the commented out lines from the HTML section.</strong>)</p>
  <p><strong>How do I get the specified styling under the CSS class to be added to the wtforms field?</strong></p>