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
How to Disable the Resize Grabber of <Textarea>
How to Change the Opacity (Alpha, Transparency) of an Element in a Canvas Element
How to Get the Collection of Model State Errors in ASP.NET MVC
How to Make in CSS an Overlay Over an Image
How to Center an Iframe Horizontally
What Do <Form Action="#"> and <Form Method="Post" Action="#"> Do
CSS Image Resize Percentage of Itself
Heading with Horizontal Line on Either Side
Aligning Decimal Points in HTML
How to Vertically Center a Bootstrap Carousel-Caption
Html5 Video // Completely Hide Controls
Why Do Firefox and Opera Ignore Max-Width Inside of Display: Table-Cell
Using HTML5 Canvas - Rotate Image About Arbitrary Point
Paying for Multiple Items (At Once) via Paypal