'Center align text in select drop down for all browsers

How do I Center align text in select drop down for all browsers? Its center aligned in Firefox, but it comes to left in Chrome and Safari.

CSS:

.challenge{
  max-width: 850px;
  width: 98%;
  height: 50px;
  background: #ffffff;
  margin: 30px auto;
}

.challenge select {
  width: 100%;
  height: auto;
  background: url(images/select_arrow.png) no-repeat right top #ffffff;
  font-family: 'RexBold';
  text-align: center!important;
  text-align: -moz-center;
  text-align: -webkit-center;
  font-size: 30px;
  padding-top: 7px;
  color: #545454;
  overflow: hidden;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}
htmlcssdrop-down-menucross-browser


Solution 1:[1]

Try with below code. Hope it will work

text-align-last: center; text-align: center;

-ms-text-align-last: center;
-moz-text-align-last: center; text-align-last: center;

Solution 2:[2]

.challenge select {
    width:100%;
    background: url(images/select_arrow.png) no-repeat right top #ffffff;
    font-family: 'RexBold';
    text-align:center;
    font-size:30px;
    color:#545454;  
    border: 0 !important;
    overflow: hidden;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding:10px;
}

Replace with this code

Solution 3:[3]

Please try this one

.challenge select {
    text-align: -webkit-center;
    flex-direction: column;
}

Solution 4:[4]

You can place it in div, then set text-align to center. That worked for me. [Newbie here]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Thomas Mathew
Solution 2 Sergio
Solution 3 Alomgir Hossain
Solution 4 sabdiangelo

Related Questions