There is a small problem with the select tag. The fact is that you need to center the elements in the select tag like this:

enter image description here

I did this using padding-left. The problem is that when you click on select, padding appears in all list items and it looks sad: enter image description here

How to make the alignment so that the selected element is always centered, and the elements in the drop-down list are aligned to the left? Something like this: enter image description here

  • give an example code - Dmytryk

2 answers 2

maybe so, it seems to me how it works. If you do not have, specify under which browser the task.

select { width: 100px; text-align: center; text-align-last: center; } option { text-align: left; } 
 <select name="select_number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select>

  • Safari does not support text-align-last at all: caniuse.com/#search=text-align-last I don’t know how important the support for the Mac browser is for the question author - humster_spb

Native design select option can not be stylized using css standard tools. You can search for any ready-made plugins or write something like this yourself:

 $('.option').mouseover(function(){ $(this).addClass('active'); $('.option').not(this).removeClass('active'); }); $('.select').click(function(){ $(this).toggleClass('open'); }) $('.option').click(function(){ $(this).addClass('active'); $('.option').not(this).removeClass('active'); $('.output').text($(this).text()); }) 
 .select { width: 300px; position: relative; border: 1px solid black; height: 30px; overflow: hidden; } .select.open { height: auto; } .select:after { content: ''; display: block; border: 8px solid transparent; border-top: 12px solid black; position: absolute; top: 10px; right: 10px; } .output, .option { cursor: default; height: 30px; padding: 5px; box-sizing: border-box; } .output { text-align: center; } .option.active { background-color: #1390ff; color: white; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="select"> <div class="output">Генеральная уборка</div> <div class="option active">Генеральная уборка</div> <div class="option">Уборка после ремонта</div> <div class="option">Мойка окон, витрин магазинов</div> <div class="option">Мойка фасадов, витрин зданий</div> </div>

  • Indeed, it turned out to be much easier to connect the plugin selectize.js and not to steam. - Pavel Bogdanov