coddding coddding - 6 months ago 55
CSS Question

select dropdown too large (Bootstrap)

Ok, so i have a simple thing on my website where users can enter a phone number and text them, so when they enter the phone number they need to select an item in a dropdown list with all country dial codes, the problem is that the dropdown list is as long as my textbox which makes everything look quite awkward, I've done some research and have messed around with it myself without any luck, just for an example here is what i am talking about (btw i use the bootstrap framework so any answer would need to support bootstrap)
enter image description here

As you can see the text box is actually smaller than the dropdown list which makes it look kinda weird, i would like to somehow scale down the dropdown so it looks better along side my text field.

Thanks for reading, any help will be appreciated!

My current code for this

dropdown looks like this

<select class='form-control'>
<option value='213'>Algeria (+213)</option>
<option value='376'>Andorra (+376)</option>
<option value='244'>Angola (+244)</option>
<option value='1264'>Anguilla (+1264)</option>
<option value='1268'>Antigua &amp; Barbuda (+1268)</option>
<option value='54'>Argentina (+54)</option>
<option value='374'>Armenia (+374)</option>
<option value='297'>Aruba (+297)</option>
<option value='61'>Australia (+61)</option>
//There is more countries..... I just cut it here so it won't be too long


How about select element in HTML?

    <option value="country code">country name</option>