样式化 HTML 下拉列表

Question

我正在尝试为我的网站上的电话号码扩展更改 dropdown 的外观。 不是所有文本的间距不均匀，而是在扩展名之间隔开。

例如：

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

会变成：

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

我尝试过简单的空格（如 ）并尝试将 (+XX) 和国家/地区名称分开在单独的标签中，但无济于事。

空格没有效果，  和 span 只是显示为他们的书面代码。有没有办法格式化下拉菜单以使其工作？下面是 HTML 示例（国家/地区列表很广泛）：

    <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

您可以简单地使用nbsp; 来格式化<option> 内的文本，因为<option> 内不能有任何其他HTML 元素并将css 应用于这些元素并获得预期的结果。

 <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

不。选项以平台原生的方式设置样式，并且仅设置其中一部分的样式是行不通的。 （这通常也不是一个特别好的主意。）

Answer 3

这是一个 javascript 解决方案。

$(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 );
  });
})

不过，它依赖于等宽字体；比如新快递。

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

Answer 4

我建议将数字放在它自己的标签中，并将其设置为所需的宽度。见this solution。

Answer 5

由于您在问题中使用了 JQuery 标记，因此我假设它已被使用。 这是一个动态插入 s 以便保持格式的函数。如果您愿意，您可以将输出结果硬编码到您的网页中，这样就不必每次都运行相同的计算。但是这样如果你更新信息，它会自动调整。

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>