CODEWITHSUNDEEP
css
user6206736
user6206736

Reputation:

How to add padding to input field text [CSS]

I have a quick question, I know that I can edit a placeholder text for an input field using CSS. But I was wondering how I can add padding to the actual text (the text that the user types in). I have provided an image below, I have added padding to the placeholder text but am struggling to add padding to the actual text for the input field so that it is aligned with the placeholder text.

Here is what I have tried:

.form TextInput {
  padding-left: 10px;
}

This obviously isn't working and I was just wondering if anyone else has a solution?

Image link

Edit: I am not trying to move the input field itself, just the text inside. Just like I did with the placeholder, but only this time I want to move the text to match the position of the placeholder.

Link 2

Upvotes: 4

Views: 22544

Answers (3)

Josh
Josh

Reputation: 161

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;
}

Upvotes: 10

user9542745
user9542745

Reputation:

1 - Padding for input, where user can type:

.form input.TextInput { 
  padding-left: 10px;
}

2 - Padding for placeholder of input:

.form input.TextInput::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  padding-left: 10px;
}
.form input.TextInput::-moz-placeholder { /* Firefox 19+ */
  padding-left: 10px;
}
.form input.TextInput:-ms-input-placeholder { /* IE 10+ */
  padding-left: 10px;
}
.form input.TextInput:-moz-placeholder { /* Firefox 18- */
  padding-left: 10px;
}

Use css prefixes for cross-browser compatibility.

Upvotes: 0

melvin
melvin

Reputation: 2621

You have to give css to the input field as follows

.form input[type="text"]{
  padding:10px;
}

Check this fiddle here

Upvotes: 3

Related Questions