HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML

<form action="{% url 'listofdates' %}" method="get" id="dateSort">
    <div class="priority-set-block">
        <ul class="priority-set-block">
            {% if priority_set == 0 %}
                <li><input class="priority-active-input" type="submit" name="priority_set" value="0">all</li>
            {% else %}
                <li><input class="priority-notactive-input" type="submit" name="priority_set" value="0">all</li>
            {% endif %}
            {% if priority_set == 1 %}
                <li><input class="priority-active-input" type="submit" name="priority_set" value="1">high</li>
            {% else %}
                <li><input class="priority-notactive-input" type="submit" name="priority_set" value="1">high</li>
            {% endif %}
            {% if priority_set == 2 %}
                <li><input class="priority-active-input" type="submit" name="priority_set" value="2">medium</li>
            {% else %}
                <li><input class="priority-notactive-input" type="submit" name="priority_set" value="2">medium</li>
            {% endif %}
            {% if priority_set == 3 %}
                <li><input class="priority-active-input" type="submit" name="priority_set" value="3">low</li>
            {% else %}
                <li><input class="priority-notactive-input" type="submit" name="priority_set" value="3">low</li>
            {% endif %}
        </ul>
    </div>
</form>


CSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSS


.priority-active-input {
    display: block
    width: 200px;
    background: #FFAAAA;
}

priority-notactive-input {
    display: block
    width: 200px;
    background: #FFFFFF;
}

ul.priority-set-block {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 20px;
    overflow: hidden;
}
ul.priority-set-block li {
    float: left;
    margin: 18px 40px 0 30px;
}

ul.priority-set-block li a {
    text-decoration: none;
}
ul.priority-set-block li a:hover {
}