Member 13884629 Ответов: 1

Как изменить HTML select box с помощью CSS / jquery

Я пытаюсь "обмануть" дизайн окна выбора, чтобы действовать как встроенная вкладка/виджет.

Проведя некоторые исследования, я знаю, что это трудно изменить с помощью CSS. Но я думаю, что это, наверное, терпимо.

Итак, основываясь на приведенном ниже codepen, когда я нажимаю на эту опцию, текст становится белым. Только когда я нажимаю на какое-то белое пространство, текст становится черным. Почему это происходит и как это исправить?

Во - вторых, как удалить правую боковую стрелку бара вещи? Я запускаю этот CSS на промежуточном сайте, chrome не показывает панель со стрелками, но mozilla получила.

Анонимная ручка на CodePen[^]

Что я уже пробовал:

- Я подумал, может быть, это из-за селекции, поэтому попробовал css ниже, но ничего не получилось
::selection {color:#000 !important;}

- Я тоже пробовал выберите опцию:активный, выберите опцию:фокус но все то же самое.

1 Ответов

Рейтинг:
2

littleGreenDude

К сожалению, я должен сказать, что то, что вы хотите сделать, недостижимо. Цвет и цвет фона не могут быть установлены на выбранном параметре. Однако вы можете установить фоновое изображение. Приведенный ниже код демонстрирует настройку фонового изображения с помощью JQuery (и сброс фона для невыбранной опции). Он также скрывает правую боковую полосу прокрутки через CSS overflow:hidden

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
			$('#mySelectList').change(function (){
			var $option = $(this).find('option:selected');			
			$option.css('color','#00000');  // <-- this is not permitted, can't set color or background on an option
			$option.css('background-image','linear-gradient(blue, gray)');
			// reset all			
			var $unoption = $(this).find('option:not(:selected)');			
			$unoption.css('background-image','none');
		});
	});
</script>
<style>
select {
	width: 100%;
	padding: 0;
	border: none;
  background-image: none;
	font-size: 16px;
	color: #868686;
	overflow: hidden;
}

select option {
		display: inline;
		float: left;
		margin-right: 128px;
}

select option:hover {
		cursor: pointer;
}

select option:checked {
		font-weight: 600;
}

</style>
<html>
<body>
 
<select id="mySelectList" multiple="multiple">
  <option value="">Latest</option>
  <option value="52">New</option>
  <option value="53">Pre-Owned</option>
  <option value="115">Unworn</option>
</select>
<div id="results">
</div>

</body>
</html>