JSFiddle - React, Tailwind, and code Playground

HTML

<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 class="list-city">
		<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>
</form>

CSS

.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;
   }

JavaScript

var listCity = document.querySelector(".styled-select");
var showListCity = document.querySelector(".chooce-option");
var cityValue = document.querySelector(".chooce-value");
			
var select = document.querySelector(".list-city");
var options = select.querySelectorAll("li");
	
	
		showListCity.addEventListener("touchstart", 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('touchstart', function(t){
					t.target.addEventListener('touchend', function(){
						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';
					})
					
				})
			});
		})