Can i modify input bootstrap dropdown

HTML & CSS
1

I am making a form which I need to modify right side icon (select Dropdown) as per below image:

But I am getting bootstrap default button style:

is there any way that I can modify my input drop as per my blue style…

<div class="col-sm-3 col-md-3 col-lg-3 pl0 pb10 mColumn35">
                          <select id="" class="form-control" name="">
                            <option value="- Select Month -">- Select Month -</option>
                            <option value="January">January</option>
                            <option value="February">February</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="August">August</option>
                            <option value="September">September</option>
                            <option value="October">October</option>
                            <option value="November">November</option>
                            <option value="December">December</option>
                          </select>
                        </div>

Regards

2

You’ll need to look at the CSS file providing styles against those class names - probably the one here

<select id="" class="form-control" name="">
3

Hi,

You can’t change much in the way of styling dropdowns and you can’t really add yourr own components (such as arrows).

However, there are some tricks you can employ to make changes but do need extra html to make it work,

Here is a styled dropdown.

To change the orange arrow you would need to adjust this line:

.plain-select:after{
	content:"";
	position:absolute;
	z-index:2;
	right:8px;
	top:50%;
	margin-top:-3px;
	height:0;
	width:0;
	border-top:6px solid #f99300;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	pointer-events:none;
}

Either create your arrow in CSS as close as you can (if that design is possible) or use an image instead and size everything to fit. (In my example the arrow is a mitred border.).

Drop downs are very hard to style consistently but if you follow the example in my codepen you should be able to get close to what you are after.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.