HTML5 placeholder css padding
I got the same issue.
I fixed it by removing line-height from my input. Check if there is some lineheight which is causing the problem
How to set the padding of placeholder text
Just add padding to the input like this:
.tbsearchbar {
padding-top: 10px;
color: red; //To add some color.
}
Change only placeholder color:
::-webkit-input-placeholder { /* WebKit browsers */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #909;
}
Padding for placeholder without changing the size of input
Try adding text-align:center for id searchfield or add box-sizing: border-box; declaration.
try with any one of below examples, it will move the placeholder to right as you expected, these will support Ie lower versions too.
Example1 (using box-sizing:border-box declaration)
#searchfield {
padding: 10px 0 13px 0px;
box-sizing: border-box;
}
Example2 (using text-align:center declaration)
#searchfield {
text-align:center;
}
How to add padding to placeholder text
Change height
property to line-height
it will align the content vertically, already you have added text-align: center
.
Instead of given padding-top
and padding-bottom
to placeholder u can just increase the line-height
.Top and bottom height will be automatically configured and finally the text will be vertically aligned.
Check the below given code:
.signup_join{ border-radius: 15px; border-style: ridge; border-color: rgb(250,250,250); border-width: 1px; background-color: black; line-height: 45px; width: 100%; text-align: center; font-family: robotoregular; font-size: 18pt; font-weight: bold; color: rgb(150,150,150); padding-bottom: 20px; padding-top: 20px;
letter-spacing: 2px; }
.signup_join_2{ border-radius: 15px; border-style: ridge; border-color: rgb(250,250,250); border-width: 1px; background-color: black; line-height: 75px; width: 100%; text-align: center; font-family: robotoregular; font-size: 18pt; font-weight: bold; color: rgb(150,150,150); padding-bottom: 15px; padding-top: 15px;
letter-spacing: 2px; }
.signup_join_3{ border-radius: 15px; border-style: ridge; border-color: rgb(250,250,250); border-width: 1px; background-color: black; line-height: 120px; width: 100%; text-align: center; font-family: robotoregular; font-size: 18pt; font-weight: bold; color: rgb(150,150,150); padding-bottom: 15px; padding-top: 15px;
letter-spacing: 2px; }
<div class="signin_text EMail_Pwd_Signin"><input type="text" class="signup_join" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required></div>
<div class="signin_text EMail_Pwd_Signin"><input type="text" class="signup_join_2" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required></div>
<div class="signin_text EMail_Pwd_Signin"><input type="text" class="signup_join_3" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required></div>
Placeholder text padding
You have to give another class name to each of your input and give a specific padding to each of them Link
HTML
<input class="form one" type="text" name="Name" placeholder="First and Last name"></div>
</div>
<div class="row col-md-3">
<input class="form second" type="email" name="Phone" placeholder="@gmail.com">
</div>
<div class="row col-md-3 ">
<input id="email" class="form third" type="tel" name="Zip" placeholder="Zip ">
</div>
CSS
.form {
background-color: #666;
color:#fff;
}
.second::-webkit-input-placeholder{
color:white;
letter-spacing: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-left:40px;
}
.third::-webkit-input-placeholder{
color:white;
letter-spacing: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-left:50px;
}
.one::-webkit-input-placeholder{
color:white;
letter-spacing: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-left:80px
}
.form::-webkit-input-placeholder{
color:white;
letter-spacing: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
CSS - Placeholder padding in Chrome
You are hard-coding the height of the inputs here:
input.form-control {
height: 63px;
}
Maybe you need to remove this and control with paddings or else play with box-sizing
if you have another inherit padding
input.form-control {
height: 63px;
box-sizing: border-box;
}
Edit:
It seems a bootstrap overriding, so inputs gets height: 34px
from the .form-control
selector (not your code, the bootstrap code). You need to avoid that with this changes:
https://jsfiddle.net/qf8L29u5/2/
Remove this:
#Contact input.form-control {
height: 63px;
}
And add this:
#Contact .form-control {
font-size: 30px;
height: inherit;
}
How to change the placeholder of an input in css?
You can't change the value of an attribute in CSS
but you could use a tricky workaround if your input is inside a form
and you can wrap the input
.
In short:
- wrap the input with a
<span>
element - overlap the
span::before
pseudoelement over the input and apply the style you chose for the:placeholder
pseudoclass - change the color and background of
:placeholder
so it's not visible anymore - set
pointer-events
tonone
forspan::before
so every click to this element will be ignored and intercepted from the underlyinginput
element. - use a required attribute for the
input
- when the
form
is:valid
then hide the pseudolement
span::before,
::placeholder {
font-family: arial;
font-style: italic;
font-size: .75rem;
padding: 5px;
line-height: 1;
box-sizing: border-box;
}
::placeholder {
color: transparent;
background: transparent;
}
span {
position: relative;
}
span::before {
content : "some other placeholder very long" ;
position: absolute;
inset: 0 5px;
z-index: 1;
color: mintcream;
background: thistle;
width: calc(100% - 10px);
white-space: nowrap;
overflow: hidden;
pointer-events: none;
}
form:valid span::before {
display: none;
}
<form>
<span><input type="text" placeholder="my placeholder" required /></span>
</form>
Related Topics
Highlight the Navigation Menu for the Current Page
Can a Span Be Closed Using <Span />
CSS Image Resize Percentage of Itself
How to Nest Button Inside Another Button
How to Embed Latex in a Webpage
CSS Selector with Period in Id
HTML Auto Embedding Recent Uploaded Videos from a Youtube Channel
<Video> Plays in Other Browsers, But Not Safari
How to Make a Textarea 100% Width Without Overflowing When Padding Is Present in CSS
CSS Transition from Display None to Display Block, Navigation with Subnav
CSS for Changing Color of Last Word in H1
How to Set Height for the Drop Down of Select Box
Get Content Between a Pair of HTML Tags Using Bash
Creating a 'New' Spiky Label with 24 or Above Point Burst
File Url Cross Domain Issue in Chrome- Unexpected
What Is the HTML For="" Attribute in <Label>