Align selected item in scrolling html dropdown

I think this can be possible you can center the selected ones but not all the options so the selected ones you can center it like

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style>
    select {
      width: 400px;
      text-align-last: center;
    }
  </style>
</head>

<body>
  <select name="state" class="ddList">
    <option>Selected</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</body>

</html>

Unfortunately, you can't do that with your default select options.

This question is already answered here.

Anyway, you could build a custom select or could use plugin for custom select and then position the dropdown:

https://select2.org/

http://gregfranko.com/jquery.selectBoxIt.js/

Tags:

Html

Css

Scroll

Alignment

Recent Posts