How can I style the input text and placeholder in input?

Question

How can I style the input text and placeholder in input?

Please tell me, is it possible to make the placeholder located in the input with such an indent, and the text when entering too? I got it so that both the placeholder and the input text are pressed to the left edge.

1

css3

Author: Максим Юрьев, 2019-12-21

Source

1 answers

score 3 · Answer 1

For indents in input

input{
  padding:0 20px;
}

You can style placeholdr separately using the pseudo-classes

input::-webkit-input-placeholder {color:#222; font-size:16px; font-family: 'RalewayRegular',"Trebuchet MS", sans-serif;}
input::-moz-placeholder          {color:#222; opacity:2; font-size:16px; font-family: 'RalewayRegular',"Trebuchet MS", sans-serif;}/* Firefox 19+ */
input:-moz-placeholder           {color:#222; opacity:2; font-size:16px; font-family: 'RalewayRegular',"Trebuchet MS", sans-serif;}/* Firefox 18- */
input:-ms-input-placeholder      {color:#222; font-size:16px; font-family: 'RalewayRegular',"Trebuchet MS", sans-serif;}
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder          {color:transparent;}
input:focus:-moz-placeholder           {color:transparent;}
input:focus:-ms-input-placeholder      {color:transparent;}