Изменение стиля остается включенным после того, как фокус потерян?

Question

У меня есть страница с несколькими раскрывающимися списками выбора и задавалась вопросом, есть ли какой-то простой способ, который после выбора элемента и теряет фокус, он сохраняет изменение стиля, так что пользователь имеет визуальную подсказку относительно того, какие элементы он выбрал т.е. у меня может быть небольшая зеленая граница вокруг каждого выбора, что является чем-то отличным от значения по умолчанию «-избрать». Я не кодер, и на нем есть около 240 вариантов, а также другой код, с которым мне не удобно обезьяна.

Я могу выделить строку и выбрать с помощью псевдо классов, но не могу представить простой способ сохранить визуальную метку.

http://i.stack.imgur.com/PLcpX.jpg

Answer 1

Насколько я знаю, это не может быть сделано с чистого CSS.

Но вы можете использовать JavaScript, как это добиться того же эффекта:

document.addEventListener('change', function(event){ 
    var element = event.target; 
    if(element.tagName == 'SELECT'){ 
     element.style.border = "1px solid green"; 
    } 
}); 

https://jsfiddle.net/xm1txLws/

UPDATE

Чтобы проверить, если параметр по умолчанию выбран снова, вам необходимо выполнить дополнительная проверка (если для выбранного варианта не указан знак значения, значение становится содержащим текстом):

document.addEventListener('change', function(event){ 
    var element = event.target; 
    if(element.tagName == 'SELECT'){ 
     element.style.border = "1px solid green"; 
     if(element.value == '-select-'){ 
      element.style.border = "none"; 
     } 
    } 
}); 

https://jsfiddle.net/xm1txLws/3/