Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Как изменить цвет выделения в select option?
 
 автор: trivium   (17.07.2013 в 15:54)   письмо автору
 
 

Всем привет.
Как можно поменять цвет выделения в option на CSS или JS?
Я пытаюсь выделить так:

option::selection {background: #ccc;}
option::-moz-selection {background: #ccc;}
option::-webkit-selection {background: #ccc; color:#fff;}

Но эти новые параметры работают только для обычного текста, но не option.
Мне надо поменять именно цвет самого фокуса выделения, а не option. Т.е. цвет выделения тёмно-синий по умолчанию везде, а мне надо поменять его на серый. Как это можно сделать?

  Ответить  
 
 автор: confirm   (17.07.2013 в 16:24)   письмо автору
 
   для: trivium   (17.07.2013 в 15:54)
 

<select style="background: цвет">

  Ответить  
 
 автор: Trivium   (17.07.2013 в 16:38)   письмо автору
 
   для: confirm   (17.07.2013 в 16:24)
 

Мне надо цвет выделения поменять, а не цвет селекта.

  Ответить  
 
 автор: confirm   (17.07.2013 в 16:42)   письмо автору
 
   для: Trivium   (17.07.2013 в 16:38)
 

Нет в элементе option выделения!
Поясняйте грамотно - чего вам надо, а то в кашу все, попробуй пойми чего...

  Ответить  
 
 автор: Sfinks   (17.07.2013 в 16:54)   письмо автору
 
   для: confirm   (17.07.2013 в 16:42)
 

Цвет выделенной строки имеется ввиду. Той, над которой мышь.

  Ответить  
 
 автор: confirm   (17.07.2013 в 16:56)   письмо автору
 
   для: Sfinks   (17.07.2013 в 16:54)
 

Спасибо за разъяснение, но это никак не выделение. Так что пусть лучше автор разъяснит мне, чего ему надо.

  Ответить  
 
 автор: Trivium   (17.07.2013 в 17:20)   письмо автору
 
   для: confirm   (17.07.2013 в 16:56)
 

Когда по многострочному option кликаете у него появляется выделение и обычно выделяется синим цветом, не цвет самого option, а цвет ВЫДЕЛЕНИЯ ну или ФОКУСА, но не самого OPTION. Так вот мне надо изменить цвет этого выделения, а background-color у option. Для обычного текста есть новый атрибут ::selection и он работает, но для option такое не работает чего-то.

  Ответить  
 
 автор: confirm   (17.07.2013 в 17:46)   письмо автору
 
   для: Trivium   (17.07.2013 в 17:20)
 

::selection - применяет стиль к выделенному пользователем тексту, а в опции нельзя просто физически выделить текст! Разницу понимаете?
Опции выбираются, а не выделяется их текст, а цвет выбранной опции (на момент щелчка) стилями вы никак не измените, так как это определяется системой.
Хотите нечто оригинальное, значит заменяйте их своими программными списками, примеров такой замены в сети много.
Если выбранные отметить, то перебрав коллекцию списка опций вы можете заменить цвет фона опции, но во время выбора он все равно будет синий.
function color(e) {
    for(i=0; i<e.length; i++) if(e[i].selected) e[i].style.backgroundColor = '#f00';
}
<select multiple="" onchange="color(this.options)">

  Ответить  
 
 автор: Trivium   (17.07.2013 в 18:29)   письмо автору
 
   для: confirm   (17.07.2013 в 17:46)
 

Цвет обычного выделения текста определяется тоже системой, но его можно поменять.
Я видел как и выделение в обычных селектах делалось...

  Ответить  
 
 автор: confirm   (17.07.2013 в 18:51)   письмо автору
 
   для: Trivium   (17.07.2013 в 18:29)
 

Вот как сделаете, покажите, но текст он и в Африке текст, а выпадающий список, это более сложный элемент, и к сожалению не все, что можно сделать с текстом, доступно для списка.

  Ответить  
 
 автор: яса1   (17.07.2013 в 17:54)   письмо автору
 
   для: Trivium   (17.07.2013 в 17:20)
 

1. псевдокласс ::selection работает только с теми элементами, которые выделяются

2. для элементов, которые отмечаются (типа <input type="checkbox">, <input type="radio">, <option></option>), существует другой псевдокласс -- :checked

3. проверить - что выделяется, а что отмечается - просто: нажмите Ctrl+A
всё, что станет "белым цветом + синим фоном" - оно выделяется
а теги <input type="checkbox">, <input type="radio">, <option></option> таковыми не станут

  Ответить  
 
 автор: Владимир55   (18.07.2013 в 00:09)   письмо автору
129.1 Кб
 
   для: trivium   (17.07.2013 в 15:54)
 

Это (скриншот)?

  Ответить  
 
 автор: Trivium   (18.07.2013 в 10:38)   письмо автору
 
   для: Владимир55   (18.07.2013 в 00:09)
 

Нет, там выделение синее. Но мне уже не надо, спасибо.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования