select option html

242

17 мая 2018, 19:10

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

Есть задача сделать выпадающий список в пределах одной ячейки и что бы содержимое optionов не выходило за рамки установленные параметром width но было видно полностью, а не скрывалось за границей.

Answer 1

Можно сделать с помощью нескольких radio, нескольких label и одного div.

Корневая label будет всегда видимой частью нашего альтернативного select. При клике на нее будет переключаться основной radio, который и отвечает за состояния открыт/закрыт у этой конструкции. Placeholder и традиционная стрелочка будут реализованы через псевдоэлементы :before и :after у корневой label. Все остальное, кроме wrapper (тот самый единственный div), по умолчанию скрыто. Почему мы не скрываем wrapper? Потому что в нем находится выбранный элемент (если такой есть), а он должен быть виден всегда.

label.selectGeneral { 
  display: block; 
  position: relative; 
} 
 
 
/** Это обещанный placeholder **/ 
 
label.selectGeneral:before { 
  content: attr(placeholder); 
  /** Взять текст из атрибута placeholder **/ 
  display: inline-block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: -1; 
  max-width: 100%; 
  text-align: left; 
  white-space: nowrap; 
  /** Не переносить слова **/ 
  color: #adadad; 
  overflow-x: hidden; 
  /** Скрыть лишнее **/ 
} 
 
 
/** А это стрелочка **/ 
 
label.selectGeneral:after { 
  content: "<>"; 
  display: inline-block; 
  position: absolute; 
  top: 0; 
  right: 0; 
  text-align: center; 
  background-color: #ffffff; 
  transform: rotate(90deg); 
} 
 
label.selectGeneral input, 
label.selectGeneral label { 
  display: none; 
} 
 
label.selectGeneral div { 
  min-width: 100%; 
  max-height: 500px; 
  /** Ограничения на высоту списка выборов **/ 
  overflow-x: hidden; 
}

<!-- Это wrapper для вариантов выбора --> 
<div> 
  <!-- Группа radio и есть аналог оригинальных option --> 
  <input type="radio" name="OS" value="linux" id="OS[linux]"> 
  <!-- Аналог видимой части option --> 
  <label for="OS[linux]">linux</label> 
 
  <input type="radio" name="OS" value="windows" id="OS[windows]"> 
  <label for="OS[windows]">windows</label> 
 
  <input type="radio" name="OS" value="other" id="OS[other]"> 
  <label for="OS[other]">other</label> 
</div> 
</label>