Add Padding to HTML Text Input Field

Add padding to HTML text input field

padding-right works for me in Firefox/Chrome on Windows but not in IE. Welcome to the wonderful world of IE standards non-compliance.

See: http://jsfiddle.net/SfPju/466/

HTML

<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz"/>

CSS

.foo
{
    padding-right: 20px;
}

How to add padding to input field text [CSS]

Padding on the input; for users typing in the field or a preset value parameter:

.form input[type="text"] {
    box-sizing: border-box;
    padding-left: 10px;
}

Padding on the placeholder:

.form input::placeholder {
    padding: 10px;
}

Add padding to form input without changing the form size

You may want to use CCS box-sizing

That will include the border and padding to the elements width

* { 
  box-sizing: border-box;
}

be careful with the * you can also add box-sizing: border-box; to only the elements needed.

Padding inside an input without affect the width

You can change the way the box model is calculated by using the box-sizing property.

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

This way you add the padding to the inputs themselves and not the placeholder text. More consistant.

Add padding between input text

Use the CSS word-spacing property on the input field:

https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

Add padding within an input text field to prevent overlapping

You can use the following solution, so the % is placed after the number controls:

.percentBlock {

  width: 1500px;

}

.percentBlock input[type=number] {

  padding-right:20px;

}

.percentageSign {

  position: relative;

  right:20px;

}

<span class="percentBlock">

  <input type="number" max="100" accuracy="2" min="0" style="text-align:right;">

  <span class="percentageSign">%</span>

</span>

Add padding to the input caret

Just removed the padding-left from .form-control::placeholder
and add it like this in the .form-control => padding: 0.375rem 0 0.375rem 10px;

Input padding also applies to the placeholder.

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0 0.375rem 10px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: #fafafa;
}

.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;

}

<input class="form-control" type="email" name="email" placeholder="E-mail" required>
<input class="form-control" type="text" name="username" placeholder="Username" required>
<input class="form-control" type="password" name="password" placeholder="Password" required>

---

Related Topics