Как изменить размер option css - Исправление ошибок и поиск оптимальных решений проблем

For example,in the code,»option»is too low,I want to make it higher only with css(no javascript).

<select>
    <option>Beijing</option>
    <option>ShangHai</option>
    <option>WuHan</option>
  </select>

asked Mar 25, 2015 at 13:19

Since that <option> (and <select>) elements are rendered by the browser as a dropdown list, unfortunately you cannot style them, because their style is only controlled by the browser itself.

answered Mar 25, 2015 at 13:24

Marco BonelliMarco Bonelli

60.9k20 gold badges119 silver badges123 bronze badges

Change select > option to ul > li list and you can style as you want it yourself with Cross browser compatibility

answered Mar 25, 2015 at 13:26

You can use ul as alternative to style as you want, check this answer.

You can only make options bold or change the font-size, but it’s not possible to change the space of the option.

option{font-size:20px;font-weight:bold;}

<select>
    <option>Beijing</option>
    <option>ShangHai</option>
    <option>WuHan</option>
  </select>

Options are rendered by the OS, not HTML, so the styling is limited.

answered Mar 25, 2015 at 13:26

NimaNima

2,0912 gold badges23 silver badges32 bronze badges

line-height can be useful
-webkit-appearance: menulist-button this one can be used both will work

answered Mar 25, 2015 at 13:24

Sagar NaliyaparaSagar Naliyapara

3,8635 gold badges39 silver badges61 bronze badges

Try this:

option{
     padding:10px 0;
   }

JSFIDDLE DEMO

Also you can use the <optgroup> element to make it run in Chrome.

EDIT:-

Just saw that it is not reliable and cant be addressed perfectly for cross browser solutions.

MDN says:

Some elements simply can’t be styled using CSS. These include all
advanced user interface widgets such as range, color, or date controls
as well as all the dropdown widgets, including , , and elements. The
file picker widget is also known not to be stylable at all. The new
and elements also fall in this category.

Alternative other than Javascript:

If possible then use Bootstrap’s Dropdown.

answered Mar 25, 2015 at 13:23

Rahul TripathiRahul Tripathi

166k31 gold badges272 silver badges328 bronze badges

If you’re concerning about the mobile friendliness or the Google’s mobile first SEO guidelines where the tappable items must not close to each other, then don’t worry, modern mobile web browser will auto-adjust the item height for you.

answered Jul 22, 2020 at 9:17

Antonio OoiAntonio Ooi

1,42516 silver badges29 bronze badges

Try This: change the height px to what you wish.

.a option { height: 50px; }

Soner Gönül

96k102 gold badges205 silver badges356 bronze badges

answered Mar 25, 2015 at 13:30

SonamSonam

2,3222 gold badges13 silver badges5 bronze badges

Источник

In the picture, the width of option is larger than the select box. I want to set width of those options as same as select box & for those larger options set text-overflow as ellipsis. Any help would be appreciated.

Here is what I tried:

Html

<select>
    <option>Select your University</option>
    <option>Bangladesh University of Engineering and Technology</option>
    <option>Mawlana Bhashani Science and Technology University</option>
</select>

Css

select, option {
    width: 250px;
}

option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Fiddle: https://jsfiddle.net/3bsbcqfz/

isherwood

56.5k16 gold badges109 silver badges151 bronze badges

asked Apr 17, 2016 at 12:47

Mahedi SabujMahedi Sabuj

2,8443 gold badges14 silver badges27 bronze badges

I tried to find a solution from CSS. But I failed to do it. Doesn’t matter, I have written a simple javascript code for it. This is can do it something for it.

function shortString(selector) {
  const elements = document.querySelectorAll(selector);
  const tail = '...';
  if (elements && elements.length) {
    for (const element of elements) {
      let text = element.innerText;
      if (element.hasAttribute('data-limit')) {
        if (text.length > element.dataset.limit) {
          element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`;
        }
      } else {
        throw Error('Cannot find attribute 'data-limit'');
      }
    }
  }
}

window.onload = function() {
  shortString('.short');
};

select {
  width: 250px;
}

option {
  width: 250px;
}

<select name="select" id="select">
  <option class='short' data-limit='37' value="Select your University">Select your University</option>
  <option class='short' data-limit='37' value="Bangladesh University of Engineering and Technology">Bangladesh University of Engineering and Technology</option>
  <option class='short' data-limit='37' value="Mawlana Bhashani Science and Technology University">Mawlana Bhashani Science and Technology University</option>
</select>

answered Apr 17, 2016 at 15:34

You can use javascript to make the length of the option text to be less so as that it matches the length of the option. I found no solution for only using css

var e=document.querySelectorAll('option')
e.forEach(x=>{
if(x.textContent.length>20)
x.textContent=x.textContent.substring(0,20)+'...';
})

select
{
width:160px;
}

<select>
<option>fwefwefwefwe</option>
<option>fwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwe</option>
</select>

answered Jan 29, 2020 at 6:25

ellipsisellipsis

11.9k2 gold badges15 silver badges33 bronze badges

Another simple jquery solution is to rewrite the option’s length manually to get the wanted size as follow :

$('option').each(function() {
  var optionText = this.text;
  var newOption = optionText.substring(0, 36);
  $(this).text(newOption + '...');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<select style="width:250px">
    <option>Select your University</option>
    <option>Bangladesh University of Engineering and Technology</option>
    <option>Mawlana Bhashani Science and Technology University</option>
</select>

answered Jan 10, 2019 at 12:32

At last, I come up with the solution by creating Custom Drop-down using ul, li. Here is the solution:

FIDDLE DEMO

HTML

 $(document).ready(function (){
  $("div.selected").on("click", function () {
      var hasActiveClass = $("div.select-box").hasClass("active");

      if (hasActiveClass === false) {
          var windowHeight = $(window).outerHeight();
          var dropdownPosition = $(this).offset().top;
          var dropdownHeight = 95; // dropdown height

          if (dropdownPosition + dropdownHeight + 50 > windowHeight) {
              $("div.select-box").addClass("drop-up");
          }
          else {
             $("div.select-box").removeClass("drop-up");
          }

          var currentUniversity = $(this).find('text').text().trim();

          $.each($("ul.select-list li"), function () {
              var university = $(this).text().trim();
              if (university === currentUniversity)
                  $(this).addClass("active");
              else
                  $(this).removeClass("active");
          });
      }

      $("div.select-box").toggleClass("active");
  });

  $("ul.select-list li").on("click", function () {
      var university = $(this).html();
      $("span.text").html(university);
      $("div.select-box").removeClass("active");
  });

  $("ul.select-list li").hover(function () {
      $("ul.select-list li").removeClass("active");
  });

  $(document).click(function (event) {
      if ($(event.target).closest("div.custom-select").length < 1) {
          $("div.select-box").removeClass("active");
      }
  });

});

div.custom-select 
{
    height: 40px;
    width: 400px;
    position: relative;
    background-color: #F2F2F2;
    border: 1px solid #E4E4E4;
}

div.selected
{
    width: inherit;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
}

div.selected > .text
{
    padding: 10px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.select-box
{
    display: none;
    width: 100%;
    z-index: 10029;
    position: absolute;
    border-radius: 3px;
    box-shadow: 0 8px 20px #000000;
    box-shadow: 0 8px 20px rgba(0,0,0,.35)
}

div.select-box.active
{
    display: block;
}

div.select-box.drop-up
{
    top: auto;
    bottom: 100%;
}

ul.select-list
{
    margin: 0;
    padding: 10px;
    list-style-type: none;
}

ul.select-list li
{
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

ul.select-list li:hover,
ul.select-list li.active
{
    background-color: #999999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='custom-select'>
    <div class="selected">
       <span class='text'>Select</span>
    </div>
    <div class='select-box'>
       <ul class='select-list'>
          <li data-row='0' data-value=''>
              Select
          </li>
          <li data-row='1' data-value='BUET'>
              Bangladesh University of Engineering and Technology
          </li>
          <li data-row='2' data-value='MBSTU'>
              Mawlana Bhashani Science and Technology University
          </li>
       </ul>
    </div>
</div>

MaxiGui

6,1054 gold badges16 silver badges33 bronze badges

answered Jun 2, 2016 at 20:37

Mahedi SabujMahedi Sabuj

2,8443 gold badges14 silver badges27 bronze badges

If you don’t mind using jQuery, here is a simple solution. Just run it at the beginning of your code and it’s applicable to every select

$('select').change(function(){
  var text = $(this).find('option:selected').text()
  var $aux = $('<select/>').append($('<option/>').text(text))
  $(this).after($aux)
  $(this).width($aux.width())
  $aux.remove()
}).change()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>Select your University</option>
  <option>Bangladesh University of Engineering and Technology</option>
  <option>Mawlana Bhashani Science and Technology University</option>
</select>

answered Dec 15, 2021 at 21:32

This may be a little late, but I found that using CodeIgniter’s word_limiter() function may do what you need, for example:

<option><?php echo word_limiter("Bangladesh University of Engineering and Technology",1); ?></option>

If you’re not using CodeIgniter, you may just look up the function.

Hope this helps!

answered Sep 14, 2022 at 15:36

Источник

Стандартный вид

<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Мальчик</option>
    <option>Девочка</option>
</select>

Далее полигон для испытаний (в течении месяца после написания статьи перестало работать то, что раньше работало в Mozilla Firefox).

Стили, применяемые к `<select>`

<style>
select { 
  font-size: 120%;
  width: 100%;
}
</style>

Убрать у `<select>` стрелку

<style>
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
select::-ms-expand {  
    display: none;
}
</style>

Псевдоэлементы (`::before`, `::after` и др.) у `<select>`

<style>
select::after { 
  content: " after";
}
</style>

Стили, применяемые к `<option>`

<style>
option:nth-child(3)::after {
  content: " " url(http://www.blogger.com/img/icon_28_followers.png);
  vertical-align: middle;
}
</style>
<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

<style>
option:nth-child(3)::after {
  content: " " url(http://www.blogger.com/img/icon_28_followers.png);
  vertical-align: middle;
}
</style>
<select size="2">
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

Стиль выбранного пункта

<style>
option:checked {
  background: olive linear-gradient(olive, olive);
  color: blue;
}
</style>
<select>
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

Стиль hover-пункта, на который наведен курсор мыши

<style>
option:hover {
  background: olive linear-gradient(olive, olive);
  color: blue;
}
</style>
<select>
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

Разный стиль у <select> и <option>

<style>
select:invalid:not(:focus) {
  color: gray;
}
select:invalid:focus {
  color: transparent;
}
select:focus option {
  color: initial;
}
</style>
<select required>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Мальчик</option>
    <option>Девочка</option>
</select>

Изображения в `<option>`

Тег `<img>` не поддерживается, так как его нельзя вставить в атрибут `<label>`

<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Мальчик</option>
    <option>Девочка <img alt="Иконка группы человек" src="http://www.blogger.com/img/icon_28_followers.png" height="28" width="28"></option>
</select>

Свойство `background-image` для `<option>`

<style>
option {
  padding: 6px 28px 6px 0;
}
option:nth-child(3) {
  background: url(http://www.blogger.com/img/icon_28_followers.png) 100% 50% no-repeat;
}
</style>
<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

<style>
option {
  padding: 6px 28px 6px 0;
}
option:nth-child(2) {
  background: url(http://www.blogger.com/img/icon_28_followers.png) 100% 50% no-repeat;
}
</style>
<select size="2">
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

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

<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Мальчик</option>
    <option>Девочка ❤️‍</option>
</select>

Теги <select>, <optgroup> и <option> | HTML
Стилизация <progress> и <input type=»range»/>

Источник

my selectbox is showing scroll when number of options are more than 20 i just want to show scrol in when options are more than 10

 <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
  </select>

asked May 8, 2014 at 6:35

Try adding this to the <select> element:

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();

like:

   <select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.size=1; this.blur();'>

SAMPLE DEMO

John

12.3k12 gold badges94 silver badges163 bronze badges

answered May 8, 2014 at 6:41

reuelabreuelab

1,9761 gold badge18 silver badges28 bronze badges

Seriously guys, there is a size attribute for the select element:

<select size="10">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

FIDDLE: http://jsfiddle.net/UR46N/

John

12.3k12 gold badges94 silver badges163 bronze badges

answered May 8, 2014 at 6:46

Vince CVince C

8586 silver badges16 bronze badges

In Case of setting size (height/width) and fitting the selection list in the pop up then try the following in VFPage- Salesforce:

<apex:selectList onclick="this.size=5;" required="true" id="form-element-05" value="{!scheduleBatchWrapper.hour}" size="1" styleClass="slds-select selectObj  slds-m-left_medium slds-m-top_medium schTime" style="max-width:50%; margin-bottom:5% margin-top:5%,max-height:20%" >
                                                                            <apex:selectOptions value="{!scheduleBatchWrapper.hoursList}"></apex:selectOptions>
                                                                        </apex:selectList>

// here onclick=»this.size=5;» will set the size to 5 when you click on the selectList.
//it works fine for Chrome,Firefox,Edge.

Thanks

answered May 27, 2020 at 12:22

As much as I see, none of the former answers explain the Options box.
As much as I know, we don’t have accessibility to manipulate options in a select box.
We just can change the colors and background color at the same time, add a new font and that’s all we could do.
If we add padding or margin to the Options, the drop-down list will be still the same as its initial condition.

The only way to do so is to design a select-box on your own( by using radio buttons, prevent their default style, and add a background color to it. )

answered Apr 27, 2021 at 11:13

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

option {
    padding: 5px 0;
}

answered Feb 1, 2020 at 7:42

I am using Bootstrap and this answer helped me.

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

answered Oct 27, 2021 at 9:46

AnupamAnupam

14.6k18 gold badges66 silver badges93 bronze badges

use below css

select{ padding:5px;}

answered May 8, 2014 at 6:41

AmitAmit

1,81119 silver badges36 bronze badges

Источник

my selectbox is showing scroll when number of options are more than 20 i just want to show scrol in when options are more than 10

 <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
  </select>

asked May 8, 2014 at 6:35

Try adding this to the <select> element:

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();

like:

   <select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.size=1; this.blur();'>

SAMPLE DEMO

John

12.3k12 gold badges94 silver badges163 bronze badges

answered May 8, 2014 at 6:41

reuelabreuelab

1,9761 gold badge18 silver badges28 bronze badges

Seriously guys, there is a size attribute for the select element:

<select size="10">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

FIDDLE: http://jsfiddle.net/UR46N/

John

12.3k12 gold badges94 silver badges163 bronze badges

answered May 8, 2014 at 6:46

Vince CVince C

8586 silver badges16 bronze badges

In Case of setting size (height/width) and fitting the selection list in the pop up then try the following in VFPage- Salesforce:

<apex:selectList onclick="this.size=5;" required="true" id="form-element-05" value="{!scheduleBatchWrapper.hour}" size="1" styleClass="slds-select selectObj  slds-m-left_medium slds-m-top_medium schTime" style="max-width:50%; margin-bottom:5% margin-top:5%,max-height:20%" >
                                                                            <apex:selectOptions value="{!scheduleBatchWrapper.hoursList}"></apex:selectOptions>
                                                                        </apex:selectList>

// here onclick=»this.size=5;» will set the size to 5 when you click on the selectList.
//it works fine for Chrome,Firefox,Edge.

Thanks

answered May 27, 2020 at 12:22

The only way to do so is to design a select-box on your own( by using radio buttons, prevent their default style, and add a background color to it. )

answered Apr 27, 2021 at 11:13

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

option {
    padding: 5px 0;
}

answered Feb 1, 2020 at 7:42

I am using Bootstrap and this answer helped me.

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

answered Oct 27, 2021 at 9:46

AnupamAnupam

14.6k18 gold badges66 silver badges93 bronze badges

use below css

select{ padding:5px;}

answered May 8, 2014 at 6:41

AmitAmit

1,81119 silver badges36 bronze badges

Источник

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

Если не брать во внимание суждения о ценности элементов управления select или подобных им, можно констатировать факт: полностью воссоздать их функции, учесть все нюансы поведения и сохранить доступность для людей с ограниченными возможностями — гиперсложная задача.

Ниже будет показано, что и как можно сделать с внешним видом select с помощью обычного CSS, оставаясь в рамках требований WCAG к доступности (читаемость, контрастность, пользовательские настройки), а также вариантов написания: справа-налево и слева-направо.

Основные стили

Сперва сбросим параметры текста.

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

`font`

Свойство font наследует все стили от контейнера(ов). Иногда при сбросе CSS указывают размер шрифта font-size, но в этом нет необходимости. font будет наследовать стили всех своих параметров: font-size, font-family, font-style, font-variant, font-weight, font-stretch и font-height (если установлено). Ещё он добавляет высоту строки line-height. В-общем, шрифт будет адаптироваться к изменениям, которые касаются всей страницы, либо с помощью надстроек, либо через настройки браузера/системы.

`letter-spacing`

Если пользователь (или автор) изменяет параметры текста, чтобы повлиять на расстояние между буквами, это не будет касаться предустановленных для поля значений. Наследование параметров font не повлияет на межбуквенное расстояние, поэтому нужно явно указать необходимость наследования значения letter-spacing: inherit. Это поможет соответствовать требованиям WCAG 2.1 Success Criterion 1.4.12: Text Spacing

`word-spacing`

Аналогично межбуквенному letter-spacing, значение word-spacing для управления интервалами между словами не будет наследоваться, если это не объявить явным образом. WCAG 1.4.12 применяется и для расстояния между словами.

`line-height`

Обратите внимание, что в коде не устанавливается высота строки line-height. Это значение нормально наследуется вместе с остальными параметрами шрифта в свойстве font. Если обнаружится, что это не так (например, из-за явной установки высоты строки ) можно добавить line-height: inherit, чтобы соответствовать WCAG 1.4.12.

Пример

В этом примере демонстрируется применение этого минимального набора стилей.

See this code Простой Select on x.xhtml.ru.

Как настроить стрелку для `select`

Часто, стрелка (индикатор того, что это выпадашка — поле выбора значений) по умолчанию плохо вписывается в дизайн и её лучше заменить на что-нибудь более подходящее. Вот необходимый минимум стилей, с помощью которых можно заменить стрелку у select:

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

select:not([multiple]) {
  padding-right: 1.2em;
  background-repeat: no-repeat;
  background-position: calc(100% - 0.25em) 0.35em;
  background-size: 0.85em auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
}

/* скроет иконку стрелки в IE */
select::-ms-expand {
  display: none;
}

Здесь удаляются стили, устанавливаемые браузером, освобождается место для графической стрелки, а затем новая картинка стрелки вставляется в качестве фона. Это должно применяться только в том случае, если select обычный и предназначен для выбора одиночного значения, а не нескольких (multiple).

See this code Select с измененной стрелкой on x.xhtml.ru.

Этот пример демонстрирует замену стрелки по умолчанию элементу select.

Продолжение настройки `select`

Стоит обратить внимание, что интервалы у текста не очень хороши. Потенциально можно сделать их более привлекательными, удобными и доступными для пользователей с помощью всего нескольких дополнительных стилей. Например, можно настроить border и padding. Эти два свойства расширяют базовые стили, описанные выше, чтобы сделать текстовые поля более удобными.

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* рамка и отступы */
  border: 0.1em solid;
  padding: 0 0.2em;
}

`border`

Изменение значений CSS-свойств для рамки поля сопряжено с риском. Согласно WCAG (SC 1.4.11: Non-text Contrast), если для элемента формы не вносить изменений в стили по умолчанию, то это никак не повлияет на контрастность. Тем не менее, с помощью border: 0.1em solid будет установлена толщина рамки на основе размера шрифта. Теперь рамка поля выбора будет масштабироваться вместе с текстом. Заодно она становится толще, чем используется по умолчанию в большинстве браузеров.

Здесь умышленно не установлен цвет рамки, чтобы позволить браузеру сделать это самостоятельно. Конечно, если фон страницы не белый, можно изменить цвет рамки.

`padding`

Трогать padding для select не обязательно. Однако, содержимое поля будет немного легче читать и использовать, если немного его настроить. Это поможет сделать отступы в select ближе к аналогичным в textarea и input, если их тоже предстоит настраивать.

Стилизация состояний `select`

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

Отключено `disabled`

Отключенные поля исключаются из требований к контрастности WCAG, как и элементы управления интерфейса по умолчанию. Если ничего не делать, браузер самостоятельно сделает всё необходимое. Поэтому здесь не стоит что-то менять в настройках цвета фона поля или текста, достаточно позволить браузеру выполнить эту работу по его усмотрению.

Сфокусировано `focused`

WCAG SC 2.4.7 не рекомендует здесь ничего делать, согласно Technique G149, потому что браузер добавляет свой собственный стиль для фокуса. Тем не менее, можно сделать его ещё более очевидным, например, использовать синий контур с хорошим контрастом к белому и добавить тень:

select:focus {
  outline: 0.15em solid #00f;
  box-shadow: 0 0 0.2em #00f;
}

Только для чтения `readonly`

Нативный элемент <select> не поддерживает атрибут readonly.

Обязательное поле `required`

Пока label указывает, что поле обязательное (вместе с атрибутом required), нет большой необходимости стилизовать select как-то особенно. Но, например, можно увеличить обязательному полю толщину границы слева. В совокупности с оформлением других полей это может дать достаточно информации. Можно не менять цвет рамки, позволяя наследование (по умолчанию от стилей пользовательского агента).

select[required] {
  border-left-width: 0.3em;
}

Поле с ошибками

Одной красной рамки тут будет недостаточно (из-за сбоев WCAG по контрасту и только по цвету), а массивные тени могут испачкать всю страницу. Слишком много усилий по привлечению внимания к ошибкам создают шум, требующий от пользователей больших усилий для их устранения. Вместо этого можно добавить небольшой индикатор в углу поля. Градиент, образующий красную метку, устанавливает белый цвет фона поля. Обратите внимание, здесь в первый раз полю select явно задаётся цвет фона.

Здесь не будет использоваться селектор :invalid, потому что он может негативно влиять на нативное представление ошибок в браузере. Вместо этого можно использовать наличие-отсутствие aria-invalid, не просто переключая его с true на false, а добавляя или удаляя этот атрибут. Поскольку стрелка, как было решено выше, также является фоновым изображением, её здесь придётся повторно установить, если речь об обычном select без множественного выбора (multiple).

select[aria-invalid] {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  );
}

select[aria-invalid]:not([multiple]) {
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 0.25em) 0.35em;
  background-size: 0.85em auto;
  background-image: linear-gradient(
      135deg,
      rgba(255, 0, 0, 1) 0,
      rgba(255, 0, 0, 1) 0.4em,
      rgba(255, 255, 255, 0) 0.4em
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
}

Стили для интернационализации

Чтобы не сильно усложнять, здесь речь пойдёт только о стилях написания справа налево, а при необходимости, будет не трудно разобраться и адаптировать это.

Для нативного поля выбора select достаточно поправить только стили, которые написаны, исходя из ожиданий для языков с написанием слева направо, а именно: стрелка, индикаторы обязательности и ошибки, которые позиционируются в зависимости от того, с какой стороны пользователь начинает читать. Здесь достаточно переместить стрелку, красную метку и более толстую границу на противоположную сторону.

*[dir="rtl"] select:not([multiple]) {
  padding-right: 0.2em;
  padding-left: 1.2em;
  background-position: 0.25em 0.35em;
}

*[dir="rtl"] select[required] {
  border-left-width: 0.1em;
  border-right-width: 0.3em;
}

*[dir="rtl"] select[aria-invalid] {
  background: linear-gradient(
    225deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  );
}

*[dir="rtl"] select[aria-invalid]:not([multiple]) {
  background: linear-gradient(
    225deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: auto, 0.85em auto;
  background-position: 0 0, 0.25em 0.35em;
}

Стили режима высокой контрастности Windows

Поскольку используются нативные элементы управления, нет вмешательства в цвета и стили для критически важных функций, которые отсутствуют в WHCM, т.е. в основном были применены системные стили — в этом направлении особо ничего делать не нужно.

Стиль подсветки контура outline здесь хорошо адаптируется. Переключение в disabled работает, как и должно по умолчанию. Стили border не затрагивают цвет и не повлияют работу с любой контрастностью.

Единственное, что может теряться — это индикация ошибки. При таком небольшом количестве цветов (система WHCM) может понадобиться акцент на другом визуальном индикаторе ошибок. Например, использовать label, чтобы четко указать на ошибки.

Стили для печати

Толщина границы масштабируется в зависимости от размера шрифта — это можно игнорировать. Пользователь, скорее всего, выберет размер шрифта, который будет разборчивым. Фоном отключенных полей и полей с ошибками можно управлять в настройках печати. Размер текста для поля не изменялся, наследуется. Здесь ничего не надо делать.

Стили для тёмного режима (dark mode)

Тёмный режим — это функциональный запрос, который нужно создать для поддержки стилей. Здесь не будет примера, а только рекомендации. Достаточно выбрать цвет фона и цвет шрифта и не писать все новые стили с нуля.

Следует наследовать цвет текста и фон (или сделать его прозрачным) и выбрать цвет рамки, который по-прежнему соответствует требованиям контрастности. Стили состояния при фокусировке тоже нуждаются в достаточном контрасте. Метка для состояния при ошибке зависит от фонового градиента к белому, поэтому нужно будет полностью переопределить стили ошибок, в том числе для RTL. Отключенные (disabled) поля также потребуют некоторой работы, так как явно заданы цвета границ и текста.

Заключение

Пример стилизованного select в разных состояниях с сохранением WCAG-доступности.

See this code Select Menus on x.xhtml.ru.

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

Похожие публикации, посвященные стилизации HTML-элемента select: Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания. Может быть эти варианты даже лучше соответствуют вашим целям и требованиям.

Under-Engineered Select Menus.

Источник

6 ответов

Измените выбор> на ul> li list, и вы можете стилизовать его самостоятельно, используя Cross Browser

Michal Kucaj
25 март 2015, в 14:44

Поскольку эти элементы <option> (и <select>) отображаются браузером как выпадающий список, к сожалению, вы не можете их стилизовать, потому что их стиль контролируется только самим браузером.

Marco Bonelli
25 март 2015, в 14:29

Попробуй это:

option{
     padding:10px 0;
   }

JSFIDDLE DEMO

Также вы можете использовать <optgroup> element чтобы он запускался в Chrome.

РЕДАКТИРОВАТЬ:-

Просто видел, что он не является надежным и не может быть идеально рассмотрен для кросс-браузерных решений.

MDN говорит:

Некоторые элементы просто не могут быть написаны с использованием CSS. К ним относятся все расширенные виджеты пользовательского интерфейса, такие как элементы управления диапазоном, цветом или датой, а также все виджеты выпадающего списка, включая, и элементы. Виджет сборщика файлов, как известно, также не является стильным. Новые и элементы также попадают в эту категорию.

Альтернатива, кроме Javascript:

Если возможно, используйте Dropstrap Dropdown.

Rahul Tripathi
25 март 2015, в 14:23

Вы можете использовать ul как альтернативу стилю по своему усмотрению, проверьте этот ответ.

Вы можете сделать только варианты bold или изменить font-size, но это не возможно изменить пространство option.

option{font-size:20px;font-weight:bold;}

<select>
    <option>Beijing</option>
    <option>ShangHai</option>
    <option>WuHan</option>
  </select>

Параметры отображаются операционной системой, а не HTML, поэтому стилизация ограничена.

Nima
25 март 2015, в 14:56

line-height может быть полезна -webkit-appearance: menulist-button который можно использовать, оба будут работать

Sagar Naliyapara
25 март 2015, в 14:15

Попробуйте это: измените высоту px на то, что вы хотите.

.a option { height: 50px; }

Sonam
25 март 2015, в 13:34

Ещё вопросы

1Java и Hadoop: несовместимые типы с TextInputFormat
1Утвердить регулярное выражение водительских прав Великобритании в JavaScript
0ndnSIM: угонщик не работает и опустошает яму
1Python Datareader не может извлечь данные о запасах из Morningstar
0Opengl направление света
0Как нарисовать таблицу как вертикальную, используя Jquery?
1JavaScript: понимание замыканий и подъема
1Удалить жесты из RatingBar
0Возврат указателя портит объект (нарушение прав доступа)
0Загрузка CSS в представлениях в codeigniter ошибка
1Обмен сообщениями и электронной почтой в Android?
0Как перебрать множество пар значений JSON-объект
0curl_easy_perform возвращает -1, когда сервер недоступен
1C # Пользовательский тип данных с «выбором»
1Shell выбирает Python 2.7, а не 3.7
0Чтение из сокета со смещением с флагом MSG_PEEK?
1Как создать шифр подстановки ключевых слов
0Проблема с компиляцией функции, которая возвращает строку &
0PHP / MySQL n-ая строка с DATE_SUB и т. Д.
0MFC ActiveX CShockwaveflash элемент. Как отключить контекстное меню?
0Сравнение объектов jQuery
0показ QMessageBox с QThread, когда графический интерфейс заморожен
0Ошибка при подключении базы данных mysql
0Ошибка оператора копирования
1как получить файл в Java (сервлет / JSP)
1Объединить два файла Config.yml в Java?
1Ошибка Tensorflow 1.7.1 с питоном 3.5
0MySQL Fetch Result Использование нескольких соединений в одном запросе?
0Цепочка подзапросов SQL в большом запросе JOINS
1можно добавить ChartRangeFilter в пузырьковую диаграмму?
0PHP: ошибка сегментации: 11
0Форматирование входных значений, но с трудностями при обновлении модели
1Назначение символа Unicode размером 4 байта для символа
0Получить данные с URL-адреса для размещения на сайте
0Как распечатать сетку и текстовые поля в JavaScript
0В одном запросе MySQL я могу вернуть массив строк из поля с массивом первичных ключей
1Внешний вид и поведение Java-приложения выглядят по-разному в NetBeans и Eclipse.
0PHP Hash raw_output формат
1Android 1.6: onActivityResult не вызывается
0Как увидеть строку запроса на моей веб-странице из отдельного файла php?
1Используя аналитику Google, возможно ли создать пользовательское измерение с помощью API (программно)
0отображение изображения и текста в одном и том же DIV через контент
1Керас: как реализовать целевую репликацию для LSTM?
1Как удалить предметы из комбинированного магазина
0Получение неверного абсолютного значения в C ++ / C
0Возврат пользователей с помощью PayPal Rest API
0Как использовать диалог JQuery в качестве диалога подтверждения в ASP.NET?
0Попытка сделать ресурсы темы Tumblr прозрачными
0Mysql Несколько пользователей, использующих diff diff SQL_CALC_FOUND_ROWS, ведут к общему количеству строк diff diff
0MySQL REGEXP обнаружение границы слова с немецкими умлаутами при использовании BINARY Operator

Источник

Для верстальщика обязательным порядком необходимо уметь стилизовать разные элементы формы. Согласитесь, что вряд ли дизайнер оставит форму, как в браузере, никак не приукрасив.

HTML разметка для select

Тег select поместим внутри тега div с классом select. Создадим две опции, между которыми и должен происходить выбор.

<div class="select"> <select> <option value="Лимон">Лимон</option> <option value="Банан">Банан</option> <option value="Яблоко">Яблоко</option> </select> </div>

Вот так select выглядит в браузере Chrome, без стилизации. Однако, с помощью CSS стилей, мы слегка его приукрасим: увеличим размер поля, отступы, цвет и стиль рамки, шрифт.

CSS для select

Зададим блоку select позицию relative, делаем мы это для позиционирования кастомной стрелочки, относительно этого блока.

.select { position: relative; }

Стилизуем тег select. С помощью свойства appearance, убираем стандартные стрелочки у элементов формы. Затем добавляем для него вендорные префиксы для браузеров Chrome и Safari нужен –webkit, а для Firefox -moz.

.select select { display: block; width: 100%; /* от ширины блока div */ padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */ background: none; /* убираем фон */ border: 1px solid #ccc; /* рамка */ border-radius: 3px;/* скругление полей формы */ -webkit-appearance: none;/* Chrome */ -moz-appearance: none;/* Firefox */ appearance: none;/* убираем дефолнтные стрелочки */ font-family: inherit;/* наследует от родителя */ font-size: 1rem; color: #444; }

Воссоздадим убранную стрелочку при помощи псевдоэлемента after, применив разные свойства border. При клике внутри поля, показывается выпадающий список, за исключением при клике по самой стрелочке. Свойство pointer-events: none; отменяет стандартное поведение при клике по элементам, прописав которое, теперь при клике по стрелочке, так же появится, выпадающий список.

.select:after { content: ""; display: block; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000 transparent transparent transparent; pointer-events: none; position: absolute; top: 50%; right: 1rem; z-index: 1; margin-top: -3px; }

Как вставить дизайнерскую стрелочку?

Ниже, я приведу два варианта, как вставить уникальную стрелочку, при верстке макета, если её нарисовал дизайнер.
Вместо стрелочки на CSS, можно добавить стрелочку в виде картинки в пустые кавычки content.

.select:after { content: " url(...) "; }

или вставить картинку в виде фона без повтора.

.select select { background: url(...) no-repeat; }

Демонстрация примера

Стилизация select option

Как вы уже заметили, что тег option, остался не стилизованным. Почему его не нужно стилизовать? Дело в том, что браузеры мобильных устройств, по разному отображают опции выбора и совсем не так, как на десктопных. Поэтому пользователи мобильных телефонов, так и так увидели бы выпадающий список без стилизации.

Заключение

Однако лучшим решением на 2019 год – это конвертировать иконку в SVG формат и вставить фоном. Такой вариант, гарантирует качественное изображение на любых разрешениях и разных масштабах.

В видеокурсе «Вёрстка сайта с нуля 2.0», я показываю на живом примере, как верстать сайт по макету.

Создано 22.05.2019 10:15:50
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник

Стандартный вид

Стили, применяемые к <select>

Убрать у <select> стрелку

Псевдоэлементы (::before, ::after и др.) у <select>

Стили, применяемые к <option>

Стиль выбранного пункта

Стиль hover-пункта, на который наведен курсор мыши

Разный стиль у <select> и <option>

Изображения в <option>

Тег <img> не поддерживается, так как его нельзя вставить в атрибут <label>

Свойство background-image для <option>

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

Основные стили

font

letter-spacing

word-spacing

line-height

Пример

Как настроить стрелку для select

Продолжение настройки select

border

padding

Стилизация состояний select

Отключено disabled

Сфокусировано focused

Только для чтения readonly

Обязательное поле required

Поле с ошибками

Стили для интернационализации

Стили режима высокой контрастности Windows

Стили для печати

Стили для тёмного режима (dark mode)

Заключение

6 ответов

Ещё вопросы

HTML разметка для select

CSS для select

Демонстрация примера

Стилизация select option

Заключение

Читайте также:

Стили, применяемые к `<select>`

Убрать у `<select>` стрелку

Псевдоэлементы (`::before`, `::after` и др.) у `<select>`

Стили, применяемые к `<option>`

Изображения в `<option>`

Тег `<img>` не поддерживается, так как его нельзя вставить в атрибут `<label>`

Свойство `background-image` для `<option>`

`font`

`letter-spacing`

`word-spacing`

`line-height`

Как настроить стрелку для `select`

Продолжение настройки `select`

`border`

`padding`

Стилизация состояний `select`

Отключено `disabled`

Сфокусировано `focused`

Только для чтения `readonly`

Обязательное поле `required`