[DivMan]

Надо задать свои стили для option (сменить фон при наведении и сделать отступы), готовые решения есть, но они очень громоздкие и я решил написать свой код, он работает, какие в нём есть недостатки?


А php программист, за такое руки не оторвёт?

<style>

.chooce-option {
	padding: 5px;
	width: 242px;
	height: 20px;
	display: inline-block;
	vertical-align: top;
	border: 1px solid;
}

.chooce-option:hover {
	cursor: pointer;
}

.chooce-value {display: none;}

	ul {
		padding: 0;
		list-style: none;
	}
	
	li {
		padding: 5px;
	}
	
	li:hover{
		background: #0c6eb9;
		color: white;
	}

.styled-select {
   width: 240px;
   height: 124px;
   overflow-x: hidden; 
   border: 1px solid #ccc;
   display: none;
   }


</style>

<form method="post">

<input type="text" name="chooceCity" value= "-" class="chooce-option" readonly>
<input type="text" value="0" name="chooceValue" class="chooce-value" readonly>
<div class="styled-select">

   <ul>
		<li data-value="1">Пункт 1</li>
		<li data-value="2">Пункт 2</li>
		<li data-value="3">Пункт 3</li>
		<li data-value="4">Пункт 4</li>
		<li data-value="5">Пункт 5</li>
		<li data-value="6">Пункт 6</li>
		<li data-value="7">Пункт 7</li>
		<li data-value="8">Пункт 8</li>
		<li data-value="9">Пункт 9</li>
		<li data-value="10">Пункт 10</li>
		<li data-value="11">Пункт 11</li>
		<li data-value="12">Пункт 12</li>
		
   </ul>
</div>
<br>
<br>
<input type="submit" value="Добавить вопрос" name="addQuestion">
</form>


<script>
	var listCity = document.querySelector(".styled-select");
	var showListCity = document.querySelector(".chooce-option");
	var cityValue = document.querySelector(".chooce-value");
	
	var options = document.querySelectorAll("li");
	
	
	showListCity.addEventListener("click", function(e){
		if(listCity.style.display != 'block') {
			listCity.style.display = 'block';
		}
		
		else {
			listCity.style.display = 'none';
		}
		
		options.forEach(function(item, i, arr) {
			options[i].addEventListener('click', function(t){
				console.log(t.target.getAttribute("data-value"))
				showListCity.value = t.target.innerHTML;
				
				cityValue.value = t.target.getAttribute("data-value");
				console.log(cityValue.value)
				listCity.style.display = 'none';
			})
		});
		
	})
	
</script>