Стилизация раскрывающегося списка HTML

Я пытаюсь изменить внешний вид раскрывающегося списка для добавочных номеров телефонов на моем веб-сайте. Вместо того, чтобы весь текст располагался неравномерно, он размещается между расширениями.

Например:

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

Станет:

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

Я пробовал простые пробелы (как  ) и пытался разделить (+ XX) и название страны отдельными тегами, но безрезультатно.

Пробелы не действуют, а   и промежутки вместо этого отображаются как их написанный код. Есть ли способ отформатировать раскрывающийся список, чтобы это работало? Ниже представлен образец 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>

javascript html dropdown jquery css
person Callum Eidson    schedule 04.07.2017    source источник
comment
Возможный дубликат стилизации части текста OPTION   -  person Christopher Moore    schedule 04.07.2017
comment
Основная идея - построить выпадающий список из других элементов.   -  person Chris G    schedule 04.07.2017

Ответы (5)


arrow_upward
2
arrow_downward

Поскольку вы использовали тег JQuery в своем вопросе, я предполагаю, что он используется. Вот функция, которая динамически вставляет &nbsp;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>

person Rithwik    schedule 04.07.2017
comment
Всем спасибо за совет. Я использую JQuery на своем сайте, и это решение отлично работает. Спасибо за помощь. - person Callum Eidson; 05.07.2017

arrow_upward
2
arrow_downward

Вы можете просто использовать nbsp; для форматирования текста внутри <option>, поскольку у нас не может быть никаких других HTML-элементов внутри <option> и применить 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>

person Ankit Agarwal    schedule 04.07.2017
comment
Я думаю, что OP нуждается в динамическом интервале - person Dilip Belgumpi; 04.07.2017

arrow_upward
1
arrow_downward

Вот решение для 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, '&nbsp;') + country;
    $this.html( text );
  });
})

Однако он полагается на моноширинный шрифт; например, новый курьер.

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

person James    schedule 04.07.2017

arrow_upward
-2
arrow_downward

Я бы посоветовал иметь числа в собственном теге и установить для него желаемую ширину. См. это решение.

person Zoom    schedule 04.07.2017
comment
<option> разрешает только текстовое содержимое - person charlietfl; 04.07.2017

arrow_upward
-3
arrow_downward

Неа. варианты стилизованы в родном для платформы стиле, и стилизация только части одного из них не работает. (Обычно это тоже не очень хорошая идея.)

person Jalin    schedule 04.07.2017
comment
Вы взяли принятый ответ из повторяющегося вопроса и разместили его здесь. Пожалуйста, избегайте этого. Вам действительно нужно поработать, чтобы заработать очки репутации. - person Christopher Moore; 04.07.2017