Center HTML Input Text Field Placeholder

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;
}

How to center placeholder/input text in an input field, but keep the cursor left aligned

You can easily do this considering :placeholder-shown. No need for JS

input {  text-align: center;  width: 60px;}
::placeholder { text-align: center;}
input:placeholder-shown { text-align: left;}
<input type="text" placeholder="hello">

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;
}

Center form input and placeholder?

Literally all you need is to add a text-align:center to your input field through a CSS class or an inline style. We can't see what kind of CSS the classes you tried to use include, so we can't really know why they didn't work out for you. :(

Fiddle:

http://jsfiddle.net/HB7LU/20067/

How to adjust the alignment of placeholder text in input box?

If you're wanting a multi-line input field you should use the textarea element.

<li>
<textarea placeholder="Message"></textarea>
</li>

You can then style this however you like using the textarea selector:

#message input,
#message textarea {
width: 250px;
height: 40px;
padding: 10px;
}

#message li input[type=text],
#message li textarea {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: none;
}

#message li textarea {
height: 150px;
resize: none;
}

JSFiddle demo.

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>

How can I align a large input's placeholder to the top?

All I needed to do was use a textarea instead of input, as input does not support multiple lines or vertical alignment.



Related Topics



Leave a reply



Submit