Выпадающий список с цветными словами в пунктах меню

Vovka · Регистрация: 27.09.2014

Студворк — интернет-сервис помощи студентам

Вобщем нужно сделать сабж.
Даже и не знаю как к этому подступиться...
В общем в каждом пункте списка нужно выводить разным цветом слова, например:
аааа 1111
вввв 2222
сссс 3333

Буквы черным цветом, а цифры, например, красным цветом

Vovka · 27.08.2016, 11:26 **[ТС]**

Сообщение от mrtoxas

скопируйте стили из поста

ничего не меняется

Добавлено через 1 минуту

Сообщение от mrtoxas

Вот, корректный

тоже самое

@mrtoxas · 27.08.2016, 11:27

А что не поменялось?

Vovka · 27.08.2016, 11:31 **[ТС]**

Пост 21
В песочнице делаю исправления - так же фиксированная ширина

@mrtoxas · 27.08.2016, 11:53

Vovka, это были исправления высоты меню и приведение css в читаемый браузером вид. Насчет ширины я еще не смотрел

Добавлено через 17 минут
Vovka, вам к ознакомлению - структура html кода.
Вы создали текстовый файл, переименовали его в .html вставили теги body, head и думаете, что это теперь полноценная html страница? А где в вашем файле доктайп? Интересно, почему все криво работает

Vovka · 27.08.2016, 12:41 **[ТС]**

Сообщение от mrtoxas

А где в вашем файле доктайп?

Не подумав подчистил от "лишнего"
Все равно в песочнице осталась проблема с шириной

@Fedor92 · 27.08.2016, 13:11

Сообщение от Vovka

Все равно в песочнице осталась проблема с шириной

Она и останется...

Даже, если убрать фиксированную ширину у блока dropdown, расширяться он будет только когда выпадет список, поскольку изначально он скрыт... Здесь можно попробовать заюзать черновые свойства такие как: overflow:hidden или word-wrap, но смотреться это будет не фонтан... Следовало изначально заюзать какой-нибудь плагин для стилизации select и не изобретать велосипед средствами CSS... Особенно, если опции списка, по Вашей задумке, меняются динамически...

@mrtoxas · 27.08.2016, 14:48

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown_check {
  display: none;
}
.dropdown__head {
  position: relative;
  width: 200px;
  border: 1px solid black;
  z-index: 1;
  box-sizing: border-box;  
}
.dropdown_title {
  width: 100%;
  text-overflow: ellipsis;
  padding: 3px 20px 2px 5px;
  border: 0;
  box-sizing: border-box;  
}
.dropdown_label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left:0;
}
.dropdown_label:after {
  content: '';
  position: absolute;
  top: 9px;
  right: 10px;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-left-width: 4px;
  border-right-width: 4px;
  border-top: 8px solid black;
  
}
.dropdown__list {
  min-width: 100%;
  box-sizing: border-box;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 100%;
  border: 1px solid black;
  display: none;
  z-index: 1;
}
.dropdown_link {
  display: block;
  padding: 5px 8px 3px 5px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  cursor: default;
}
.dropdown_link:visited {
  color: #000;
}
.dropdown_link:hover {
  background: #eee;
}
.dropdown_check:checked ~ .dropdown__head {
  border-bottom: 0;
}
.dropdown_check:checked ~ .dropdown__list {
  display: inline-block;
}
.dropdown_check:checked ~ .dropdown__head > .dropdown_label:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.dropdown_check:checked ~ .dropdown__head > .dropdown_label:after {
  content: '';
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  top: 8px;
  border-top: 8px solid #999;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="text" hidden name="color" />
<!-- в input hidden name="color" передается выбранное значение, для отправки -->
<div class="dropdown" data-hidden="color">
  <input type="checkbox" class="dropdown_check" id="btn" />
  <div class="dropdown__head">
    <input type="text" class="dropdown_title" value="Выберете цвет" />
    <label class="dropdown_label" for="btn"></label>
  </div>
  <div class="dropdown__list">
    <a href="#" class="dropdown_link">Gray-brown-crimson color polka dot</a>
    <a href="#" class="dropdown_link">Tomato</a>
    <a href="#" class="dropdown_link">Lightblue</a>
    <a href="#" class="dropdown_link">Purple</a>
  </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var menu = document.querySelector('.dropdown'),
  title = menu.querySelector('.dropdown_title'),
  checkBox = menu.querySelector('.dropdown_check'),
  dataHidden = menu.dataset.hidden,
  targetInput = document.querySelector('input[name=' + dataHidden + ']');
menu.addEventListener('click', function(event) {
  var target = event.target;
  while (target != menu) {
    if (target.tagName == 'A') {
      checkBox.checked = false;
      title.value = target.innerHTML;
      targetInput.value = title.value;
      return
    }
    target = target.parentNode;
  }
})

Результат
Для старых IE скрыть это меню и показать обычное, при помощи условных комментариев.

@Fedor92 · 27.08.2016, 15:21

Не по теме:

mrtoxas, вот это шпала... :D Почему-то сразу подумал, что ты так и сделаешь, но честно говоря сомневался...

@mrtoxas · 27.08.2016, 15:22

Fedor92,

Не по теме:

пусть будет :)

Vovka · 31.08.2016, 17:19 **[ТС]**

Нашел вариант с jquery - пробовал в нем цвет выводить, получается.
Но вот как только все скопировал в свой файл - не работает!
Не пойму в чем дело...
m.zip

Новые блоги и статьи Все статьи Все блоги /
GitHub Copilot в JetBrains: модель по умолчанию, Fix и контроль MCP and_y87 12.10.2026 10 октября 2026 года GitHub обновил Copilot для JetBrains: добавил настройки стартовой модели, исправления из диагностики и управление автозапуском MCP. Поддержка IDE 2025. 1 прекращена — требуется. . .	День 5 из 28: Codex подсказывает следующий запрос and_y87 12.10.2026 9 октября 2026 года OpenAI запустила бету Composer predictions — подсказок следующего сообщения в текущем диалоге Codex. Это помощь с формулировкой запроса, а не автоматическое продолжение задачи. . . .	Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ" Adler 06.10.2026 Всем привет! За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .	ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .
Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .

Vovka 38 / 38 / 11 Регистрация: 27.09.2014 Сообщений: 491

	Выпадающий список с цветными словами в пунктах меню 23.08.2016, 22:50. Показов 5011. Ответов 29 Метки нет (Все метки) Вобщем нужно сделать сабж. Даже и не знаю как к этому подступиться... В общем в каждом пункте списка нужно выводить разным цветом слова, например: аааа 1111 вввв 2222 сссс 3333 Буквы черным цветом, а цифры, например, красным цветом 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.08.2016, 11:27
	А что не поменялось? 0

Vovka 38 / 38 / 11 Регистрация: 27.09.2014 Сообщений: 491
	27.08.2016, 11:31 [ТС]
	Пост 21 В песочнице делаю исправления - так же фиксированная ширина 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.08.2016, 11:53
	Vovka, это были исправления высоты меню и приведение css в читаемый браузером вид. Насчет ширины я еще не смотрел Добавлено через 17 минут Vovka, вам к ознакомлению - структура html кода. Вы создали текстовый файл, переименовали его в .html вставили теги body, head и думаете, что это теперь полноценная html страница? А где в вашем файле доктайп? Интересно, почему все криво работает 0

@Fedor92
	27.08.2016, 15:21
	Не по теме: mrtoxas, вот это шпала... :D Почему-то сразу подумал, что ты так и сделаешь, но честно говоря сомневался... 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.08.2016, 15:22
	Fedor92, Не по теме: пусть будет :) 0

Vovka 38 / 38 / 11 Регистрация: 27.09.2014 Сообщений: 491
	31.08.2016, 17:19 [ТС]
	Нашел вариант с jquery - пробовал в нем цвет выводить, получается. Но вот как только все скопировал в свой файл - не работает! Не пойму в чем дело... m.zip 0

Выпадающий список с цветными словами в пунктах меню

Решение