How to center the text of the select option?

Question

Guys, how can I center the text of the option that is within select? Or there is no such possibility?

Answer 1

Is not possible!. Doing this should work in "some" browsers and others not (I assume only Firefox Desktop):

.main {
    width: 100px;
}

.main option {
    text-align: center;
}

<select class="main">
    <option>Foo</option>
    <option>Bar</option>
    <option>Baz</option>
</select>

The reason it does not work in most is why I already explain in detail on this link:

- How to force elements to appear below in IE?

Unlike most elements, the <option>s are usually not rendered by browser rendering engine, but rather by the larger application that is separated from such engine, in other words who "renders" they are the "application" and is application "magpie" the options within the <select> the moment you "click" and turn into a Widget (High level widgets) that when selected one of the items it sends a reply back to the engine.

So the element <option> it is as if it were just a "database" that the browser sends to the application and in turn the application generates the "high level widget".

Here’s an example of smartphones that instead of showing overlay items (dropdown list) is shown something like:

In other words, the browser itself can generate, or pass the task to the system and from this point it receives the control signals (when it selects an item or cancels), but there is almost no DOM control, for this reason it is not possible to customize the elements CSS <option>

So the only guaranteed solution is to create a simulated Select.

Alternative solution, simulating a combobox

The best way to get around this problem is to create a combobox (<select>) simulated, using <div>, <ul>, <li> and tabindex=""

If you want something ready, try Dropkick, in this case the class should be customized .dk-option

Example of use:

<link href="../css/dropkick.css" rel="stylesheet">
<script src="../js/dropkick.min.js"></script>

<style>
.dk-option {
    text-align: center;
}
</style>

<form id="test">
    <select name="tipo" id="combo1">
        <option value="a">tipo a</option>
        <option value="b">tipo b</option>
    </select>

    <select name="setor" id="combo2">
        <option value="a">setor a</option>
        <option value="b">setor b</option>
    </select>
</form>

<script>
    (function() {
        var combo1 = new Dropkick("#combo1");
        var combo2 = new Dropkick("#combo2");

        combo1.open(); //Abre o combo1
    })();
</script>

Answer 2

guy I had the same problem but I managed to solve

I had to make a css sheet and put the following code

css:

.select-center{
  padding-left: 15%;
  padding-right: 15%;
}

html:

<select class="select-center">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>