0

I'd like to decorate a textfield by showing an icon as background-image (with background-repeat: no-repeat;) Now I need to maintain that the input-area starts a bit more to the right. I do that this way:

body {
 max-width: 500px; }

#page {
 background-color: #0000FF;
}

input[type='text'] {
 background-color: #12eaec;
 font-size: 24px;
 padding: 4px 6px;
 width: 80%;}

#line2 {
 padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>padding text fields problem</title>
</head>
<body>
 <div id="page">
  <input type="text" id="line1" placeholder="1 ... width = 80%" />
  <input type="text" id="line2" placeholder="2 ... padded" />
  </div>
</body>
</html>

But that results in the lower (padded) edit field to become wider than the other one.

misbehaviour

How can I circumvent that?

Thanks!

ralfiii
  • 584
  • 4
  • 13
  • 1
    Do you know about the css setting [`box-sizing: border-box` ?](https://css-tricks.com/international-box-sizing-awareness-day/) - and [here is a second link](https://css-tricks.com/box-sizing/) with even more Coyier goodness. – cssyphus Jan 24 '19 at 15:43
  • Yes gibberish, that answers my question perfectly. Thanks. Don't know how to close that question here... – ralfiii Jan 25 '19 at 14:27

0 Answers0