Is it possible to vertically align a placeholder independently of the parent input? There seems to be no way to have the placeholder in the code below appear in the vertical center of the input field. I've tried all css properties and workarounds I can think of or find online but the different font sizes on the input and the placeholder seem to make it impossible in webkit browsers at least.
Edit: Left is the issue, right is the desired look:
input {
font-size: 22px;
text-align: center;
font-weight: bold;
line-height: 44px;
}
input::-webkit-input-placeholder {
font-size: 9px;
text-transform: uppercase;
color: #AAA;
}
<input type='text' placeholder='enter some text' />
The best solution out there might be to simply add a translate3d transform to the placeholder CSS rule as follows:
input {
font-size: 22px;
text-align: center;
font-weight: bold;
line-height: 44px;
}
input::-webkit-input-placeholder {
font-size: 9px;
text-transform: uppercase;
color: #AAA;
transform:translate3d(0,-4px,0)
}
<input type='text' placeholder='enter some text' />
This feels like such a stupid "solution", but maybe you could substitute transform:scale(0.45) in place of the font-size: 9px;. It seems to work just about anywhere font-size in ::-webkit-input-placeholder is supported.
input {
font-size: 22px;
text-align: center;
font-weight: bold;
line-height: 44px;
}
input::-webkit-input-placeholder {
text-transform: uppercase;
color: #AAA;
transform: scale(0.45);
}
<input type='text' placeholder='enter some text' />
Edit: Left Aligned
input {
font-size: 22px;
text-align: left;
font-weight: bold;
line-height: 44px;
}
input::-webkit-input-placeholder {
text-transform: uppercase;
color: #AAA;
transform: scale(0.45);
transform-origin: 0% 50%;
}
<input type='text' placeholder='enter some text' />
Related
QUESTION 1:
Why do the following textarea and text input have different vertical text alignment if they both have the same font-size, line-height, height, padding ?
QUESTION 1.1
How can I make the textarea have the same vertical alignment as the input ?
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
Textareas are for multiline texts while inputs are made for single line.
That's why line height won't have effect on input as it's considered to be equal to the input's height.
You can remove line height on your input since it has no effect on it.
Beside you should have the same line height as height for your textarea to reproduce the same effect than the input.
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 32px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
I have an input and h4 element. I'm using the same font and font size but they do not look the same.
#font-face {
font-family: sansReg;
src: url(../fonts/openSansReg.ttf);
}
.global-message h4 {
/*for the chat messages*/
margin: 0;
font-size: 15px;
font-family: sansReg;
}
.input {
/*for the chat message input*/
padding-left: 10px;
box-sizing: border-box;
font-size: 15px;
font-family: sansReg;
border: 0;
border-radius: 2px;
background-color: white;
margin: 0 auto;
outline: 0;
background-repeat: no-repeat;
background-position: 2px 3px;
display: block;
}
<div id="chat-box">
<div id="chat-list-container">
<ul id="chat-messages">
<li class="global-message">
<h4>Will: Anyone wanna play?</h4>
</li>
<li class="global-message">
<h4>George: Hey guys!</h4>
</li>
<li class="global-message">
<h4>Jessica: How do i start a game?</h4>
</li>
</ul>
</div>
<input id="chat-message" class="input" type="text" placeholder="Message" maxlength="32" />
</div>
So as you can see I have some h4's to fill the chat and my input below it and I have used the same font but it looks like this:
The h4 element has font-weight bold by default; therefore, if you want to make the input look the same way, you have to add font-weight: bold; to your input style.
Or, if you want to make h4 look like the input, you can remove the bold by setting it to normal font-weight: normal; on the h4 element.
Examples:
*{
font-family: Helvetica, Arial;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
<h4>default bold</h4>
<h4 class="normal">light</h4>
<input value="default light"><br>
<input value="bold" class="bold"><br>
Headings have different default values. In your case you compare an h4 with a paragraph. As you can see below there is a big difference. What you need is to add font-weight: bold; to your .input-class.
H4 default values
h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Paragraph default values
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
A "good" practice (or what I try to remember to do) is to copy all default values in for each CSS-element I create. By doing so I have access to all properties and not only those I want to change.
Add css properties font-weight: bold; font-size: 1em to the input field. The font will look identical to the h4 font.
Try adding this to your css:
.global-message h4{
font-weight: normal;
}
It should make all the font look the same.
I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.
It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
left: 10px;
position: absolute;
top: 2px;
}
.input-symbol-dollar {
position: relative;
}
.abc-input {
border: 2px solid #c9c9c9;
box-shadow: none;
color: #6b6f72;
font-size: 0.9375rem;
text-transform: none;
width: 100%;
color: #37424a !important;
font-family: "Roboto Regular", sans-serif;
font-size: 16px !important;
font-weight: 400;
height: 42px !important;
padding-left: 17px !important;
display: inline-block !important;
}
label {
color: #37424a;
display: inline-block;
font-family: "Roboto Bold", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>
https://jsfiddle.net/8jdek3zt/5/
It looks like there's a lot of unnecessary code in your example.
Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).
span {
display: inline-block;
position: relative;
}
input {
border: 2px solid #c9c9c9;
box-shadow: none;
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
height: 42px;
padding-left: 20px;
}
span::before {
content: "$";
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
<span>
<input placeholder="0.00">
</span>
Here's an explanation of the vertical centering method for the pseudo-element:
Element will not stay centered, especially when re-sizing screen
The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">
As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:
https://jsfiddle.net/chzk1qgm/1/
.input-symbol-dollar {
position: relative;
display: block;
}
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
position: absolute;
display: block;
height: 100%;
top: 0;
left: 10px;
line-height: 46px; // height of input + 4px for input border
}
Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.
try putting span in div.
<label for="abcInput" class="abc-label">lable filed </label>
<div>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000">
</span>
</div>
.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
<span>$</span>
<input style="border: none;"/>
</div>
When the placeholder's font-size is different to input font-size, the placeholder is misaligned vertically in Chrome (in Firefox it works fine).
Screenshot:
Here is the HTML / CSS:
body {
padding: 20px;
}
input {
padding: 0 10px;
color: green;
font-size: 30px;
height: 57px
}
input::-webkit-input-placeholder {
color: blue;
font-size: 14px;
line-height: 57px;
}
input::-moz-placeholder {
color: blue;
font-size: 14px;
}
<input type="text" value="" placeholder="Placeholder text">
Also available as a jsFiddle.
This seems like buggy behaviour by Chrome, the placeholder is aligned vertically with the baseline of the larger font size in the input.
In order to correctly vertically center the smaller placeholder text in Chrome, you can use position: relative and top: -5px as a workaround.
Workaround
body {
padding: 20px;
}
input {
padding: 0 10px;
color: green;
font-size: 30px;
height: 57px;
}
input::-webkit-input-placeholder {
color: blue;
font-size: 14px;
position: relative;
top: -5px;
}
input::-moz-placeholder {
color: blue;
font-size: 14px;
}
<input type="text" value="" placeholder="Placeholder text">
How can I centre the input field's placeholder's alignment in a html form?
I am using the following code, but it doesn't work:
CSS ->
input.placeholder {
text-align: center;
}
.emailField {
top:413px;
right:290px;
width: 355px;
height: 30px;
position: absolute;
border: none;
font-size: 17;
text-align: center;
}
HTML ->
<form action="" method="POST">
<input type="text" class="emailField" placeholder="support#socialpic.org" style="text-align: center" name="email" />
<!<input type="submit" value="submit" />
</form>
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;
}
input{
text-align:center;
}
is all you need.
Working example in FF6. This method doesn't seem to be cross-browser compatible.
Your previous CSS was attempting to center the text of an input element which had a class of "placeholder".
you can use also this way to write css for placeholder
input::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;
}
You can use set in a class like below and set to input text class
CSS:
.place-holder-center::placeholder {
text-align: center;
}
HTML:
<input type="text" class="place-holder-center">
The HTML5 placeholder element can be styled for those browsers that accept the element, but in diferent ways, as you can see here: http://davidwalsh.name/html5-placeholder-css.
But I don't believe that text-align will be interpreted by the browsers. At least on Chrome, this attribute is ignored. But you can always change other things, like color, font-size, font-family etc. I suggest you rethinking your design whether possible to remove this center behavior.
EDIT
If you really want this text centered, you can always use some jQuery code or plugin to simulate the placeholder behavior. Here is a sample of it: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.
This way the style will work:
input.placeholder {
text-align: center;
}
You can make like this:
<center>
<form action="" method="POST">
<input type="text" class="emailField" placeholder="support#socialpic.org" style="text-align: center" name="email" />
<input type="submit" value="submit" />
</form>
</center>
Working CodePen here
You can try like this :
input[placeholder] {
text-align: center;
}
::-webkit-input-placeholder {
font-size: 14px;
color: #d0cdfa;
text-transform: uppercase;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
:-moz-placeholder {
font-size:14px;
color: #d0cdfa;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
::-moz-placeholder {
font-size: 14px;
color: #d0cdfa;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
:-ms-input-placeholder {
font-size: 14px;
color: #d0cdfa;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
For vertically centering the placeholder:
input::placeholder{
position:relative !important;
top:50% !important;
transform:translateY(-50%) !important;
}
You can also use padding to adjust in case you need!
By using the code snippet below, you are selecting the placeholder inside your input, and any code placed inside will affect only the placeholder.
input::-webkit-input-placeholder {
text-align: center
}