0

I have a login page with two fields: 

<select id="operatore" name="operator">
    <option disabled selected>Operator</option>
    <option>John</option>
    <option>Jennifer</option>
    <option>Carl</option>
</select> 
<input type="password" placeholder="Password" id="search_field" readonly>

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: enter image description here

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?

HERE is the full CODE.

panagulis72
  • 2,129
  • 6
  • 31
  • 71
  • 2
    Possible duplicate of [Is it possible to center text in select box?](http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box) – Stefan Neuenschwander Jan 12 '16 at 17:59

4 Answers4

2

you can give it a text indent like
text-indent: 40px;
this won't make it aligned center but it will move it to the middle
and by the way there is a better way of making a placeholder for the select 

<option style="display: none;" value="">Operator</option>

this way it won't show up in the drop-down

David Genger
  • 875
  • 10
  • 25
  • Thank you, but the indent become bigger in others browser. So I used I specific target for Chrome: @supports (-webkit-appearance:none) { #operatore { text-indent: 65px; } } – panagulis72 Jan 13 '16 at 08:27
0

Taken from: Is it possible to center text in select box?

I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.

However, using a jQuery plugin, you could style the dropdown:

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.

Community
  • 1
  • 1
Stefan Neuenschwander
  • 823
  • 1
  • 6
  • 23
0

You can't really customise <select> or <option> much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Rohit Sharma
  • 2,017
  • 1
  • 20
  • 22
0

Ok, I believe I have fixed your Operator problem.

Here is the slightly changed code.

form input {/*ADDED*/
  width: 250px;
}

form input, #operatore {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);

  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
 padding-left: 90px;/*ADDED*/
 padding-right: 80px;/*ADDED*/
  /*TOOK AWAY width: 250px; PROPERTY*/
  display: block;
  text-align: center;
  font-size: 18px;
  color: white;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
}

For some odd reason in Chrome the selector form input, #operatore is disabling any other changes made to (form) selector, option. Moreover if I were to add an extra selector, for example: #operatore {someCSS}, the (selector) form input, #operatore would STILL take precedence over that selector and I also used !important. Anyway you will have to align the text manually using padding-left and padding-right.

HTMLNoob
  • 821
  • 7
  • 14