Can i modify input bootstrap dropdown

HTML & CSS
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.