Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
218 views
in Technique[技术] by (71.8m points)

html - using flags as options for languages in django

I'm trying to add flags to my dropdown for i18n, so far I've tried adding an img tag and using as background image but none of them seem to work

    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            {% get_current_language as LANGUAGE_CODE %}
            <form action="{% url 'set_language' %}" method="post">
                {% csrf_token %}
                <input type="hidden" name="next" value="{{ redirect_to }}">
                <select name="language" id="" class="icon-menu">
                    {% get_available_languages as LANGUAGES %}
                    {% get_language_info_list for LANGUAGES as languages %}
                    {% for language in languages %}
                        <option value="{{language.code}}"
                            {% if language.code == LANGUAGE_CODE %} selected {% endif %}
                            {% if language.code == "en-gb" %}
                              style="background-image:url(/static/img/en-gb.png);" alt="english">english
                            {% elif language.code == "pt-br" %}
                                >portugues<img src="/static/img/pt-br.png" alt="">
                            {% else %}
              {{ language.name_local }}
                            {% endif %}
                        </option>
                    {% endfor %}
                </select>
                <input type="submit" value="{% trans 'Go' %}">
            </form>
        </li>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

you should consider using a 3rd javascript library like select2 (https://select2.org/).

To learn more why refer to this doc from Mozilla (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Styling_with_CSS) :

The element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
...