Html5 Placeholder CSS Padding

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 to none for span::before so every click to this element will be ignored and intercepted from the underlying input 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



Leave a reply



Submit