Moving text in input

Question

I'm having trouble to move text inside input. If i add margins or paddings it moves or scales the input. I want to move "Username" 10px away from left side.

.log_inp input[type="username"] {
  top: 80px;
  height: 28px;
  width: 234px;
  border: solid 1px #e4e4e4;
  font-family: OpenSans-Italic;
  color: #9a9a9a;
  font-size: 13px;
}
input {
  padding: 0px;
}

<div class="log_inp">
  <form action="#">
    <input type="username" name="Username" placeholder="Vārds...">
    <br>
    <input type="password" name="Password" placeholder="Parole...">
    <br>
    <input type="submit" value="Ienākt">
  </form>
</div>

You mean you want to push the placeholder text over to the right? — j08691, Apr 01 '16 at 16:29
Possible duplicate of [HTML5 placeholder css padding](http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding) — Katrina, Apr 01 '16 at 16:31

score 1 · Answer 1 · answered Apr 01 '16 at 16:30

If you want to change the padding and not have it influence the total size of the input, set box-sizing to border-box.

In the following example, the two inputs are the same size, but I have given the username one a left padding.

.log_inp input {
  top: 80px;
  height: 28px;
  width: 234px;
  border: solid 1px #e4e4e4;
  font-family: OpenSans-Italic;
  color: #9a9a9a;
  font-size: 13px;
  padding: 0px;
  box-sizing: border-box;
}
input[type="username"] {
   padding-left:10px;
}

<div class="log_inp">
  <form action="#">
    <input type="username" name="Username" placeholder="Vārds...">
    <br>
    <input type="password" name="Password" placeholder="Parole...">
    <br>
    <input type="submit" value="Ienākt">
  </form>
</div>

score 1 · Accepted Answer · edited Apr 01 '16 at 16:40

If you want to only move the placeholders over, use vendor prefix CSS properties:

::-webkit-input-placeholder {
   padding-left: 10px;
}
::-moz-placeholder { 
   padding-left: 10px;
}
:-ms-input-placeholder {  
   padding-left: 10px;
}

<div class="log_inp">
  <form action="#">
    <input type="username" name="Username" placeholder="Vārds...">
    <br>
    <input type="password" name="Password" placeholder="Parole...">
    <br>
    <input type="submit" value="Ienākt">
  </form>
</div>

score 0 · Answer 3 · answered Apr 01 '16 at 16:35

.log_inp input[type="username"] {
 
  height: 28px;
  width: 234px;
  border: solid 1px #e4e4e4;
  font-family: OpenSans-Italic;
  color: #9a9a9a;
  font-size: 13px;
 padding-left:10px;
}
input {
  padding: 0px;
}

<div class="log_inp">
  <form action="#">
    <input type="username" name="Username" placeholder="Vārds...">
    <br>
    <input type="password" name="Password" placeholder="Parole...">
    <br>
    <input type="submit" value="Ienākt">
  </form>
</div>

score 0 · Answer 4 · answered Aug 26 '17 at 10:42

0

With accepted answer cursor position of input is not modified.

You can move placeholder text of your input along with its cursor position via

input {
  text-indent: 10px;
}

https://www.w3schools.com/csSref/pr_text_text-indent.asp

answered Aug 26 '17 at 10:42

midzer

347
4
4

score -1 · Answer 5 · answered Apr 01 '16 at 16:35

-1

Check it out it might be helps u

input{
    text-align:center;
}

answered Apr 01 '16 at 16:35

Balvant Ahir

610
1
9
16

1

OP did not ask for text to be centered. Please read carefully. – Aziz Apr 02 '16 at 03:35

Moving text in input

5 Answers5