1

In my Flask app I am using a form with a SelectField to select a color.

When rendering this field in my html, using jinja2, I would like to have the text for each color be styled in the corresponding color.

Currently when the SelectField items are rendered on the html form they only have the attribute of "value".

I was attempting to solve the problem by adding an attribute for "style" so that I can set the css text color by directly referencing the value field (which contains a string for the hex representation of the desired color).

Is there a better way to do this?

Here is what I am getting currently: SelectField options

Which is rendered using the code:

form = MyForm()

class MyForm(FlaskForm):
    ... other form fields ...
    color = SelectField('Base Color:', choices=[('#0390fc','Blue'),('#41fc03','Green'),('#ca03fc','Purple')], validators=[DataRequired()])
    ... other form fields ...

            <!-- Color form group -->
            <div class="form-group">
                {{ form.color.label(class="form-control-label") }}

                {% if form.color.errors %}
                    {{ form.color(class="form-control form-control-lg is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.color.errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.color(class="form-control form-control-lg") }}
                {% endif %}
            </div>

And which returns the html:

<!-- Color form group -->
<div class="form-group">
  <label class="form-control-label" for="color">Base Color:</label>       
  <select class="form-control form-control-lg" id="color" name="color" required>
    <option value="#0390fc">Blue</option>
    <option value="#41fc03">Green</option>
    <option value="#ca03fc">Purple</option>
  </select>                        
</div>

I would like my SelectField options to look more like this: SelectField Desired Styling

Which I have been able to generate so far by modifying my jinja2 code as:

            <!-- Color form group -->
            <div class="form-group">
                {{ form.color.label(class="form-control-label") }}

                {% if form.color.errors %}
                    {{ form.color(class="form-control form-control-lg is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.color.errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.color(class="form-control form-control-lg") }}
                    {% for subchoice in form.color %}
                        {{ subchoice(**{'style': 'color:' + subchoice.object_data + ';'}) }}
                    {% endfor %}
                {% endif %}
            </div>

This returns html with the desired option list, however, the list is outside of the portion of the SelectField, which makes it useless: SelectField Solution Attempt Failed

            <!-- Color form group -->
            <div class="form-group">
                <label class="form-control-label" for="color">Base Color:</label>
                <select class="form-control form-control-lg" id="color" name="color" required>
                   <option value="#0390fc">Blue</option>
                   <option value="#41fc03">Green</option>
                   <option value="#ca03fc">Purple</option>
                </select>
                    
                <option style="color:#0390fc;" value="#0390fc">Blue</option>
                <option style="color:#41fc03;" value="#41fc03">Green</option>
                <option style="color:#ca03fc;" value="#ca03fc">Purple</option>
             </div>
snakecharmerb
  • 47,570
  • 11
  • 100
  • 153
stackoverflowing321
  • 333
  • 4
  • 14
  • Does this answer your question? [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) – snakecharmerb Jun 27 '20 at 20:30
  • as per this thread https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element technically it's not possible to apply for each `option` element a different style unless you decide to use 3rd javascript plugins. – cizario Jun 27 '20 at 20:35
  • @snakecharmerb i moved my answer to the comment section but it looks you pointed to the same link as me ? – cizario Jun 27 '20 at 20:38
  • 1
    @cizario if you use the flag option, the "Does this answer your question?" comment is created automatically. If you have the close vote privilege the flag counts as a vote to close, otherwise it just adds the question to the close vote review queue. – snakecharmerb Jun 27 '20 at 20:42
  • right, I understand how to style the option of an html (I was able to color the text of the select field in my post...), but that doesn't work in this case because of the FlaskForms. FlaskForms automatically generates the html, but it also returns the response to the "form" variable on the back end of my application. I am looking for a way to add the text coloring to the html that is auto generated from Flask. – stackoverflowing321 Jun 29 '20 at 19:32

0 Answers0