CODEWITHSUNDEEP
csssass
jbenowitz
jbenowitz

Reputation: 1815

Input Placeholder without padding

Generated by SASS, I'm attempting to write an input that has a center placeholder but a left aligned (with some padding) input text. I'm still somewhat new to CSS, so please overlook any ignorance.

Setting the padding-left in the input css, I generate 2 problems:

  1. When I text-align:center the placeholder text, I still have that padding pushing the alignment to the right a bit.
  2. When I set a 50% width on the input, it doesn't take the padding into account, thus I get a few pixels + 50% of the parent container.

The following is my SASS code:

input::-webkit-input-placeholder {
 color:white;
 text-align:center;
}
input[type=text],input[type=password],input[type=tel],input[type=email] {
 height:$formiconheight;
 width:$formItemMaxWidth;
 margin:5px;
 border-radius:5px;
 padding-left:$formiconwidth + $formInputPadding;
}

Upvotes: 0

Views: 1118

Answers (1)

David Storey
David Storey

Reputation: 30434

For the issue with padding-left, you are only adding padding to the left, so it stands to reason that the text won’t be centred. Either don't add any padding or add an equal amount to padding-left and padding-right.

The width in CSS if for the content box only. Not the content, padding, and border. If you want to include the padding, you should include box-sizing: border-box (and -moz-box-sizing: border-box for Firefox). This tells the browser to make the width include the padding.

Also, you only include the prefix for WebKit for the placeholder. Firefox and IE also allow you to style the placeholder, so you should include another rule set for both:

input:-ms-input-placeholder { }

and:

input::-moz-placeholder { }

If you want to support Firefox < 19, you should also include:

input:-moz-placeholder { }

Upvotes: 1

Related Questions