13

I have a drop down list which has placeholder text. In other browsers, I have been able to center this placeholder text but in Chrome, text-align:center

Here is the HTML for the Select:

.bookingform::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #FFF;
  font-size: 18px;
  font-family: "Raleway";
  text-align: center;
}
.bookingform:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #FFF;
  opacity: 1;
  font-size: 18px;
  font-family: "Raleway";
  text-align: center;
}
.bookingform::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #FFF;
  font-size: 18px;
  font-family: "Raleway";
  opacity: 1;
  text-align: center;
}
.bookingform:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #FFF;
  font-size: 18px;
  font-family: "Raleway";
  text-align: center;
}
.bookingform:placeholder-shown {
  /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color: #FFF;
  font-size: 18px;
  font-family: "Raleway";
  text-align: center;
}
<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="ADULTS*">ADULTS*</option>
  <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>
  <option value="8">8</option>
</select>

So is there something that I am missing? All of my other text inputs have their placeholders aligned to the center and the drop down boxes are aligned to the center on other browsers like Firefox.

j08691
  • 204,283
  • 31
  • 260
  • 272
DigM
  • 509
  • 1
  • 4
  • 24

1 Answers1

65

Is this what you are trying to do ?

select {
  text-align: center;
  text-align-last: center;
  /* webkit*/
}
option {
  text-align: left;
  /* reset to left*/
}
<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="ADULTS*">ADULTS*</option>
  <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>
  <option value="8">8</option>
</select>
<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="ADULTS*">ADULTS*</option>
  <option value="1" selected="true">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>
  <option value="8">8</option>
</select>

This is partially supported by browsers (issues, at least, in Edge and Safari)

Claudiu
  • 3,700
  • 1
  • 38
  • 35
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • 2
    the best solution .Thanks – Hassan ALi Oct 06 '16 at 18:20
  • 1
    Does not work in Safari 10.1 – BigJ Apr 06 '17 at 13:56
  • 1
    @BigJ unfortunately not yet supported in a few browsers :( http://caniuse.com/#search=text-align-last _I do not have a MAC to to check it out_ – G-Cyrillus Apr 06 '17 at 17:47
  • 1
    Not working in edge – pollaris Oct 10 '17 at 13:59
  • @pollaris my earlier comment pointed at http://caniuse.com/#search=text-align-last :( (it says now partially supported, did it improved a bit ? lol , not significant at all ... ) ;) if you have any workaround, please feel free to add an answer here for anyone else ;) – G-Cyrillus Oct 10 '17 at 14:39
  • Does not work in Microsoft Edge 42.17134.1.0 Microsoft, EdgeHTML 17.17134 – Sidal Sep 25 '18 at 07:01
  • Do you need `text-align:left` on the option? As far as I know options cannot be styled as the browser styles the list of options, they will be left aligned by default – jmona789 Feb 15 '19 at 21:37