Как изменить размер шрифта для опции выбора?

Я пытаюсь создать раскрывающийся список вариантов выбора. Можно ли сделать размер шрифта для параметров отличным от значения по умолчанию? Например, значение по умолчанию:

-- Select Country --

Будет размер 7pt; и один из вариантов,

Georgia

Будет размер 13pt.

Это мой раскрывающийся список:

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}
<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

ОТВЕТЫ

Ответ 2

Это выполнимо, но сложно.

Обычные выпадающие объекты не будут принимать стили. НО. Если в теге есть параметр "размер", применяется почти любой CSS. Используя этот трюк, я создал скрипку, практически эквивалентную обычным тегам select, плюс значение можно редактировать вручную, как ComboBox на визуальных языках (если только вы не вставляете readonly во входной тег).

Итак, вот минимальный пример, чтобы увидеть принцип:
(вам понадобится jQuery для механизма щелчка):

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
</div>

Здесь скрипка с несколькими стилями: https://jsfiddle.net/dkellner/7ac9us70/

(Он наполнен градиентами, чтобы выглядеть странно, просто чтобы продемонстрировать возможности.)

Обратите внимание, что теги <optgroup> не инкапсулируют параметры, принадлежащие им, как они обычно должны; да, это намеренно, это для стиля (благородный способ был бы намного менее стильным). И да, они отлично справляются с этим.

Ответ 3

Сообщите элементу опции 13pt

select option{
    font-size: 13pt;
}

а затем первый элемент опции должен быть 7pt

select option:first-child {
    font-size: 7pt;
}

Запуск демо: http://jsfiddle.net/VggvD/1/

Ответ 4

проверьте эту скрипту,

я только что отредактировал вышеупомянутый скрипт, его рабочий

http://jsfiddle.net/narensrinivasans/FpNxn/1/

.selectDefault, .selectDiv option
{
    font-family:arial;
    font-size:12px;
}

Ответ 5

попробуйте это

http://jsfiddle.net/VggvD/2/

CSS добавьте свой код

.select_join option{
    font-size:13px;
}

Ответ 6

select[value="value"]{
   background-color: red;
   padding: 3px;
   font-weight:bold;
}