I am trying to add an OpenID icon to the background of the Website field on my WordPress blog. Currently, the code I am using is:

#url {
    background-image: url('openid.gif');
    background-position: 3px 50%;
    background-repeat: no-repeat;
    padding-left: 21px !important;
}

That left padding makes the input expand to the right, pushing its label out and destroying the nice line the three boxes make.

The input box itself is:

<input type="text" name="url" id="url" value="" size="22" tabindex="3" />

Is there a pure CSS way to add the icon such that it doesn't expand but text won't be typed over it? I don't want to be mucking around in my template code in case of updates to my theme.

2 answers

1
point
This was chosen as the best answer

If you don't want to use px-based dimensions, I think you have two options. Something like this:

input {
    padding-right: 20px;
}
input#url {
    padding-left: 20px;
    padding-right: 0px;
    background: transparent url('openid.gif') 3px 50% no-repeat;
}

or something like this:

input {
    width: 20em;
}
input#url {
    width: 18em;
    padding-left: 2em;
    background: transparent url('openid.gif') .5em 50% no-repeat;
}

Alternatively, you could size the text boxes with px, since all browsers (including IE) now resize all px-based measurements just like they resize ems:

input {
    width: 200px;
}
input#url {
    width: 180px;
    padding-left: 20px;
    background: transparent url('openid.gif') 3px 50% no-repeat;
}

My vote would be for the third, since it has the most predictable results across the board.

Answered about 7 years ago by Justin Hileman
  • Thanks, that did exactly what I was looking for! I specified '#commentform input' for the first block and changed the width to 183px, and it worked like a charm. Behold it on any comment form at http://technobabbl.es/ I'll add you to the Special Thanks section on my About page. :-) Voyagerfan5761 about 7 years ago
o.k.w 2355
1
point

There's no 'width' defined for the "#url" css class, that might explain the padding widening the box as it will then fall back on the "size=22". Try adding a width for it to constraint it from expanding.

Answered about 7 years ago by o.k.w
  • Because I'd like them to all line up (there are three input fields on top of each other), I need to define a width for all of them. I'd like to use ems to define the width, but there's no standard way to say "20em - 21px" for the width of #url. Voyagerfan5761 about 7 years ago