Text-Align: Center Placeholder Text in Select

text-align: center placeholder text in select

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>

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:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

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.

Placeholder text-align

Your selector input[placeholder="Required"] selects an input with a placeholder attribute, not the placeholder itself.

Use the selectors given in your example:

input::-webkit-input-placeholder {
  text-align: right;
}
input::-moz-placeholder {
  text-align: right;
}
input::-ms-input-placeholder {
  text-align: right;
}
input::placeholder {
  text-align: right;
}

<form method="post">
  <div class="blocks">
    <label for="fullname">Full Name</label>
    <input type="text" id="fullname" name="name" placeholder="Required">
  </div>
  <div class="blocks">
    <label for="Email">Email Address</label>
    <input type="Email" id="Email" name="email" placeholder="Required">
  </div>
</form>

Center HTML Input Text Field Placeholder

If you want to change only the placeholder style, select the ::placeholder pseudo-element

::placeholder {
   text-align: center; 
}

/* or, for legacy browsers */

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

Centering a Placeholder and Input Text in a Text Field

This can be used to text-align:center

CSS:

input, input[placeholder] {
    text-align: center;
}

Simulating text-align center for selected option in a select using simple javascript or jQuery

How do you feel about using another div to hold your value?

HTML

<div class="wrapper">
  <select onchange="change(this)">
    <option value="-1">Please Select</option>
    <option value="0">Scotty Auten</option>
    <option value="1">Adriane Gaillard</option>
    <option value="2">Tequila Goodnough</option>
  </select>
  <div id="value" aria-hidden="true" tabindex="-1">Please Select</div>
</div>

CSS

.wrapper {
  width: 100%;
  position: relative;
}
#value {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  pointer-events: none;
}
select {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #999;
  color: white;
  text-color: white;
  margin: 0;
}
option {
  color: black;
  text-color: black;
}

function change(item) {
  var name = item.options[item.selectedIndex].text
  document.getElementById("value").innerHTML = name;
}

We use aria hiding to hide the value div from a screen reader.

text-align: right; only for placeholder?

/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }

Text-Align: Center Placeholder Text in Select