text-align: center placeholder text in select [duplicate]

Question

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.

Mcmurray

Your css classes are not in the html code that you have provided. – Bounce

“I have a drop down list which has placeholder text” – not in the code you have shown. – Satisfy

Answer 1

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)

Zarf

Does not work in Safari 10.1 – Sustentation

@Sustentation unfortunately not yet supported in a few browsers :( caniuse.com/#search=text-align-last I do not have a MAC to to check it out – Zarf

Not working in edge – Lap

@Lap my earlier comment pointed at 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 ;) – Zarf

Does not work in Microsoft Edge 42.17134.1.0 Microsoft, EdgeHTML 17.17134 – Passer

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 – Peridotite