I am using bootstrap3 in django template to display dropdown menu so that user can select the option they chooses. After selecting the option, selected option is not displaying clearly. See below images.
While selecting the options
After selecting the option its displays like below
It's hard to see what option user selected. How to fix this issue so that user can see clearly see what option they chose?
below is the html code I am using for this
{% extends 'base.html' %}
{% load bootstrap3 %}
{% block content %}
<body>
<section class="hero p9">
<div class="explore-section">
<div class="container">
<form method="post" >
{% csrf_token %}
{% bootstrap_form form %}
<button class='btn btn-default' type='submit'>Select</button>
</form>
</div>
</div>
</section>
</body>
{% endblock content %}
FYI, this is the below is the form I am using for this.
class selectPostTypeForm(forms.Form):
STATUS_CHOICES = (('1', 'Text Post'),('2', 'Image Post'),('3', 'Video Post'),)
post_type = forms.ChoiceField(choices=STATUS_CHOICES)
edit: CSS information
.hero {
padding: 10rem 0px 0px 0px;
background-size: cover;
background-position: bottom left;
}
.hero.p9{
padding: 9rem 0px 0px 0px;
}
.explore-section {
text-align: center;
padding: 40px 0px;
}
.explore-section h2 {
color: #3b5997;
font-size: 40px;
}
.explore-section p {
font-size: 16px;
color: #656565;
margin: 0px 0px 20px;
}