CODEWITHSUNDEEP
htmlcss
Berisko
Berisko

Reputation: 643

Moving text in input

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>

enter image description here

Upvotes: 1

Views: 2005

Answers (5)

midzer
midzer

Reputation: 367

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

Upvotes: 0

j08691
j08691

Reputation: 207861

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>

Upvotes: 1

Balvant Ahir
Balvant Ahir

Reputation: 620

Check it out it might be helps u

input{
    text-align:center;
}

Upvotes: -1

ratiorick
ratiorick

Reputation: 726

.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>

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46539

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>

Upvotes: 1

Related Questions