I used bootstrap but placeholder is not in center align
<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">
Inputbox font size is : 20px
Placeholder font size is: 14px
my client doesn't want to change the font size of the input box and placeholder. but if I set it with the same font size then it aligned center.
I want the placeholder to be aligned the center of the text box with a different font size of textbox and placeholder. Please help.
use ::placeholder class in css
css
#findNearestClinicText{
width: 400px;
font-size: 20px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-align:center;
font-size: 14px;
}
::-moz-placeholder { /* Firefox 19+ */
text-align:center;
font-size: 14px;
}
:-ms-input-placeholder { /* IE 10+ */
text-align:center;
font-size: 14px;
}
:-moz-placeholder { /* Firefox 18- */
text-align:center;
font-size: 14px;
}
Please check this link https://jsfiddle.net/xunbfvvh/
using Padding In css
Method-1 : using id
#findNearestClinicText
{
padding:10px;
font-size:20px;/* Inputbox font size*/
}
/* Placeholder font size is: 14px */
#findNearestClinicText::-webkit-input-placeholder {
font-size: 14px;
}
#findNearestClinicText::-moz-placeholder {
font-size: 14px;
}
#findNearestClinicText::-ms-input-placeholder {
font-size: 14px;
}
#findNearestClinicText::-moz-placeholder {
font-size: 14px;
}
<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">
Method-2 : Using Attribute
input[type='text']
{
padding:10px;
font-size:20px;/* Inputbox font size*/
}
/* Placeholder font size is: 14px */
input[type='text']::-webkit-input-placeholder {
font-size: 14px;
}
input[type='text']::-moz-placeholder {
font-size: 14px;
}
input[type='text']::-ms-input-placeholder {
font-size: 14px;
}
input[type='text']::-moz-placeholder {
font-size: 14px;
}
<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">
Related
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.
What I want
Chrome
On Chrome, the input text looks normal.
What is happening
Firefox
Safari
As you can see, the input text is being slightly cut off at the bottom on Firefox and majorly cut off on Safari. How can I fix that?
If anyone could help w/ this it would be greatly appreciated!
Code
HTML
<div class="row page-header">
<div class="col-xs-10">
<div class="form-group">
<input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"> </div>
</div>
</div>
CSS
/*Add borders when hover or click on input boxes*/
input[type="text"] {
outline: none;
box-shadow:none !important;
border: 1px solid white; /*make the borders invisble by turning same color as background*/
}
input[type="text"]:hover, input[type="text"]:focus{
border: 1px solid #cccccc;
border-radius: 8px;
}
/*Style input text boxes*/
input[type='text'][name='Worksheet-Name']{
font-size: 36px;
margin-top: 20px;
margin-left: 15px;
}
input[type='text'][name='Worksheet-Problem']{
font-size: 20px;
}
/*Change placeholder*/
input[type='text'][name='Worksheet-Name']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']::-moz-placeholder { /* Firefox 19+ */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-ms-input-placeholder { /* IE 10+ */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-moz-placeholder { /* Firefox 18- */
font-weight: 500;
font-size: 36px;
}
/*Change placeholder*/
input[type='text'][name='Worksheet-Problem']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']::-moz-placeholder { /* Firefox 19+ */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-ms-input-placeholder { /* IE 10+ */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-moz-placeholder { /* Firefox 18- */
font-weight: 400;
font-size: 20px;
}
JSFiddle
Guys sometimes proposed solutions don't work with placeholders, here is more powerful approach:
input::placeholder {
overflow: visible;
}
You can reduce the bottom padding and/or the font size and that will fix your overflow issue.
input[type='text'][name='Worksheet-Name']{
font-size: 35px;//instead of 36
margin-top: 20px;
margin-left: 15px;
}
or
.input-lg {
height: 46px;
padding: 10px 16px 0;//change here to have 0
font-size: 18px;
line-height: 1.33333;
border-radius: 6px;
}
also possibly answered here with line-height:
Why is Firefox cutting off the text in my <input type="text"/>?
Fixed this with line-height:1 on the input
The cause is placing the line-height on the placeholder, if you remove that then it will no longer be cut
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">
I have a problem with styling first letter of placeholder. I want to achieve that the first letter was Arial. I have this code in scss
input[type=text] {
font-family: MyriadPro;
font-size: 18px;
color: #fff;
background-color: black;
margin-bottom: 55px;
&::-webkit-input-placeholder: : first-letter {
font-family: 'Font Awesome';
padding-right: 10px;
}
&:-moz-placeholder::first-letter {
font-family: 'Font Awesome';
padding-right: 10px;
}
&::-moz-placeholder::first-letter {
font-family: 'Font Awesome';
padding-right: 10px;
}
&:-ms-input-placeholder::first-letter {
font-family: 'Font Awesome';
padding-right: 10px;
}
}
<input type="text" placeholder=" zadejte Vás email">
It works in Chrome and Opera. But in Firefox it doesn't affect first letter. Is this a bug of explorer? Is there a way to achieve it?
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
}