Как изменять цвет рамки у select при выборе option?

Question

[Bob Clapton]

Можно ли как-то через css сделать так что бы при выборе пункта (option) цвет рамки (select) изменялся и оставался на месте?
Типа выбрал нужный пункт, цвет рамки поменялся и остался на тот который задашь.

Comments

[imko]

Можно привязаться к выбран/не выбран через валид/инвалид

[Bob Clapton]

imko, можно небольшой пример?

[imko]

https://codepen.io/herr-imko/pen/zYajjgb Ну соответственно вариантов цвета только два а не для каждого опшона

[Bob Clapton]

imko, Спасибо огромное!

[imko]

Bob Clapton, подходит? я тгда в ответ скину)

Answer 1

[Сергей delphinpro]

const select = document.querySelector('select');// Берем первый селект на странице
select.addEventListener('change', () => {
  switch (select.value) {
    case 1:
      select.style.border = '1px solid red';
      break;
    case 2:
      select.style.border = '1px solid green';
      break;
    case 3:
      select.style.border = '1px solid blue';
      break;
  }
})

Обрабатываем все селекты

document.querySelectorAll('select').forEach(select => {
  select.addEventListener('change', () => {
    switch (select.value) {
      case 1:
        select.style.border = '1px solid red';
        break;
      case 2:
        select.style.border = '1px solid green';
        break;
      case 3:
        select.style.border = '1px solid blue';
        break;
    }
  })
})

Comments

[Bob Clapton]

Только через JS?
Через CSS это не как не сделать?

[Сергей delphinpro]

Bob Clapton, на CSS вам в комментариях ответили