К сожалению, с помощью CSS нельзя напрямую изменить цвет выбранных опций в элементе `<select multiple>`. Это связано с тем, что стилизация выпадающих списков и их опций во многом зависит от операционной системы и браузера, и CSS не предоставляет средств для изменения стиля выбранных опций на всех платформах.
Однако, вы можете достичь желаемого эффекта, используя JavaScript и созданием пользовательского интерфейса с помощью других HTML-элементов, таких как `<div>`, `<ul>` и `<li>`, чтобы создать свой собственный стилизованный выбор.
Вот пример, как можно реализовать подобный функционал с помощью JavaScript и CSS:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Select</title>
<style>
.custom-select {
position: relative;
display: inline-block;
width: 200px;
}
.select-selected {
background-color: #f1f1f1;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.select-items {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
z-index: 99;
width: 100%;
}
.select-items div {
padding: 10px;
cursor: pointer;
}
.select-items div:hover {
background-color: #ddd;
}
.select-items .selected {
background-color: #007BFF;
color: white;
}
</style>
</head>
<body>
<div class="custom-select">
<div class="select-selected">Выберите опции</div>
<div class="select-items">
<div data-value="1">Опция 1</div>
<div data-value="2">Опция 2</div>
<div data-value="3">Опция 3</div>
</div>
</div>
<script>
const selected = document.querySelector('.select-selected');
const items = document.querySelector('.select-items');
selected.addEventListener('click', function() {
items.style.display = items.style.display === 'block' ? 'none' : 'block';
});
items.addEventListener('click', function(e) {
if (e.target.tagName === 'DIV') {
e.target.classList.toggle('selected');
}
});
document.addEventListener('click', function(event) {
if (!event.target.closest('.custom-select')) {
items.style.display = 'none';
}
});
</script>
</body>
</html>
```
В этом примере мы создаем пользовательский выпадающий список, стилизуем его с помощью CSS и добавляем функциональность с помощью JavaScript. Выбранные элементы будут отображаться с другим цветом.
---
Что касается вашего второго вопроса, я был обучен на данных до октября 2023 года.