Стилизация option + PHP

Тема больше подходит в раздел JS, но мне ещё интересно, что бы её увидели PHP программисты.

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

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

PHP:

1. <?php
2.     if(!empty($_POST['addQuestion'])) {
3.         if(!empty($_POST['chooceCity']) && !empty($_POST['chooceValue'])) {
4.             echo $_POST['chooceCity'] . ' <br>';
5.             echo $_POST['chooceValue'] . ' <br>';
6.             echo '<br>';
7.             echo '<br>';
8.             echo '<br>';
9.         }
10.      
11.         else {
12.             echo 'Выберите город';
13.             echo '<br>';
14.             echo '<br>';
15.             echo '<br>';
16.         }
17.     }
18. ?>

Код (CSS):

1. <style>
2.  
3. .chooce-option {
4.     padding: 5px;
5.     width: 242px;
6.     height: 20px;
7.     display: inline-block;
8.     vertical-align: top;
9.     border: 1px solid;
10. }
11.  
12. .chooce-option:hover {cursor: pointer;}
13. .chooce-value {display: none;}
14. ul {padding: 0; list-style: none; }
15. li { padding: 5px;}
16. li:hover{ background: #0c6eb9; color: white;}
17.  
18. .styled-select {
19.    width: 240px;
20.    height: 124px;
21.    overflow-x: hidden;
22.    border: 1px solid #ccc;
23.    display: none;
24. }
25.  
26.  
27. </style>

HTML:

1. <form method="post">
2.  
3. <input type="text" name="chooceCity" value= "-" class="chooce-option" readonly>
4. <input type="text" value="0" name="chooceValue" class="chooce-value" readonly>
5. <div class="styled-select">
6.  
7.    <ul>
8.         <li data-value="1">Пункт 1</li>
9.         <li data-value="2">Пункт 2</li>
10.         <li data-value="3">Пункт 3</li>
11.         <li data-value="4">Пункт 4</li>
12.         <li data-value="5">Пункт 5</li>
13.         <li data-value="6">Пункт 6</li>
14.         <li data-value="7">Пункт 7</li>
15.         <li data-value="8">Пункт 8</li>
16.         <li data-value="9">Пункт 9</li>
17.         <li data-value="10">Пункт 10</li>
18.         <li data-value="11">Пункт 11</li>
19.         <li data-value="12">Пункт 12</li>
20.      
21.    </ul>
22. </div>
23. <br>
24. <br>
25. <input type="submit" value="Добавить вопрос" name="addQuestion">
26. </form>
27.  
28.  
29. <script>
30.     var listCity = document.querySelector(".styled-select");
31.     var showListCity = document.querySelector(".chooce-option");
32.     var cityValue = document.querySelector(".chooce-value");
33.  
34.     var options = document.querySelectorAll("li");
35.  
36.     showListCity.addEventListener("click", function(e){
37.         if(listCity.style.display != 'block') {
38.             listCity.style.display = 'block';
39.         }
40.      
41.         else {
42.             listCity.style.display = 'none';
43.         }
44.      
45.         options.forEach(function(item, i, arr) {
46.             options[i].addEventListener('click', function(t){
47.                 console.log(t.target.getAttribute("data-value"))
48.                 showListCity.value = t.target.innerHTML;
49.              
50.                 cityValue.value = t.target.getAttribute("data-value");
51.                 console.log(cityValue.value)
52.                 listCity.style.display = 'none';
53.             })
54.         });
55.      
56.     })
57.  
58. </script>

 

Код вообще простой, и где тут яма?