title: Align center a disabled selection with CSS
body: <p>I have a login page with two fields: </p>
  
  <pre><code>&lt;select id="operatore" name="operator"&gt;
      &lt;option disabled selected&gt;Operator&lt;/option&gt;
      &lt;option&gt;John&lt;/option&gt;
      &lt;option&gt;Jennifer&lt;/option&gt;
      &lt;option&gt;Carl&lt;/option&gt;
  &lt;/select&gt; 
  &lt;input type="password" placeholder="Password" id="search_field" readonly&gt;
  </code></pre>
  
  <p>I want that all the text appears centred. In Firefox all works fine. But in Chrome the written "Operator" appears on the left, even if the style inspector doesn't cancel the style, as you can see from the image: 
  <a href="https://i.stack.imgur.com/oHJ6C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oHJ6C.png" alt="enter image description here"></a></p>
  
  <p>In the native app for surf the net in Samsung Tablet, the written "Operator" appears centered, but the placeholder "password" appears on the left. Why? How can I fix all these problems? </p>
  
  <p><a href="http://plnkr.co/edit/TKl8WnAtPbjfRbHfO6MB?p=preview" rel="nofollow noreferrer">HERE</a> is the full <strong>CODE</strong>.</p>