Styling HTML Dropdown List

Question

I am trying to change the appearance of a dropdown for phone number extensions on my website. Instead of all the text being unevenly spaced, it is spaced between the extension.

For example:

(+43) Austria
(+353) Ireland
(+1) United States

Would become:

(+43)  Austria
(+353) Ireland
(+1)   United States

I have tried simple whitespaces (as  ) and trying to separate the (+XX) and country name apart in separate tags but to no avail.

The whitespaces have no effect and the   and spans just show up as their written code instead. Is there any way to format the dropdown to make this work? A sample of the HTML is below (the list of countries is extensive):

    <select class="countryCodeForMobile valid" id="countryCodeForMobile" name="countryCode">
    <option value="+61">(+61) Australia</option>
    <option value="+43">(+43) Austria</option>
    <option value="+32">(+32) Belgium</option>
    <option value="+55">(+55) Brazil</option>
    <option value="+1">(+1) Canada</option>
    <option value="+33">(+33) France</option>
    <option value="+49">(+49) Germany</option>
    <option value="+353">(+353) Ireland</option>
    <option value="+39">(+39) Italy</option>
    <option value="+31">(+31) Netherlands </option>
    <option value="+64">(+64) New Zealand</option>
    <option value="+48">(+48) Poland</option>
    <option value="+351">(+351) Portugal</option>
    <option value="+27">(+27) South Africa</option>
    <option value="+34">(+34) Spain</option>
    <option value="+41">(+41) Switzerland</option>
    <option selected="selected" value="+44">(+44) United Kingdom</option>
    <option value="+1">(+1) United States</option>
    </select>

Answer 1

You can simply use nbsp; to format text inside the <option> as we cannot have any other HTML element inside <option> and apply css to that elements and get intended result.

 <select class="countryCodeForMobile valid" id="countryCodeForMobile" name="countryCode">
    <option value="+61">(+61)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Australia</option>
    <option value="+43">(+43)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Austria</option>
    <option value="+32">(+32)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Belgium</option>
    <option value="+55">(+55)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Brazil</option>
    <option value="+1">(+1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Canada</option>
    <option value="+33">(+33)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; France</option>
    <option value="+49">(+49)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Germany</option>
    <option value="+353">(+353)&nbsp;&nbsp;&nbsp; Ireland</option>
    <option value="+39">(+39)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Italy</option>
    <option value="+31">(+31)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Netherlands </option>
    <option value="+64">(+64)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; New Zealand</option>
    <option value="+48">(+48)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Poland</option>
    <option value="+351">(+351)&nbsp;&nbsp;&nbsp; Portugal</option>
    <option value="+27">(+27)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; South Africa</option>
    <option value="+34">(+34) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Spain</option>
    <option value="+41">(+41)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Switzerland</option>
    <option selected="selected" value="+44">(+44)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; United Kingdom</option>
    <option value="+1">(+1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;United States</option>
    </select>

Answer 2

Since you used a JQuery tag in your question I assume it is used. Here is a function that dynamically inserts  s so that a format is maintained. You can take the output and hard code it into your webpage if you wish, so that the same calculation needn't be run every time. But this way if you update the information, it automatically adjusts.

var number_of_spaces = 7;

$("#countryCodeForMobile option").each(function(){

  var codelength = $(this).attr("value").length + 2; //2 Added for brackets.
  var value = $(this).html();
  var code = value.slice(0,codelength)
  var country = value.slice(codelength+1);
  var number_of_nbsps = number_of_spaces - code.length;
  var final = code;
  for (var i=0; i<number_of_nbsps; i ++) 
  {
  final = final + "&nbsp;&nbsp;"
  }
  final = final + country;
  $(this).html(final);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="countryCodeForMobile valid" id="countryCodeForMobile" name="countryCode">
    <option value="+61">(+61) Australia</option>
    <option value="+43">(+43) Austria</option>
    <option value="+32">(+32) Belgium</option>
    <option value="+55">(+55) Brazil</option>
    <option value="+1">(+1) Canada</option>
    <option value="+33">(+33) France</option>
    <option value="+49">(+49) Germany</option>
    <option value="+353">(+353) Ireland</option>
    <option value="+39">(+39) Italy</option>
    <option value="+31">(+31) Netherlands </option>
    <option value="+64">(+64) New Zealand</option>
    <option value="+48">(+48) Poland</option>
    <option value="+351">(+351) Portugal</option>
    <option value="+27">(+27) South Africa</option>
    <option value="+34">(+34) Spain</option>
    <option value="+41">(+41) Switzerland</option>
    <option selected="selected" value="+44">(+44) United Kingdom</option>
    <option value="+1">(+1) United States</option>
    </select>

Answer 3

Here is a javascript solution.

$(function(){
  $('#countryCodeForMobile option').each(function(){
    var $this = $(this),
    split = $this.text().split(' '),
    countryCode = split.shift(),
    country = split.slice(0,split.length).join(' '),
    text = countryCode.padEnd( 7, ' ').replace(/ /g, ' ') + country;
    $this.html( text );
  });
})

It relies on a monospace typefont, though; such as courier-new.

Codepen: https://codepen.io/jamespoel/pen/WOJBeR

Answer 4

I would suggest having the numbers in it's own tag and set that to desired width. See this solution.

Answer 5

Nope. options are styled in a way native to the platform, and styling only a part of one doesn't work. (It usually wouldn't be a particularly good idea either.)