Adding backgrounds to input tags?

[GE2009]

Alright; I've created a very simple form that is on my front page for clients to be able to request quote information/to be contacted; no big deal there. I used CSS pseudo classes to create the ":hover and :focus" behaviors so that the form fields and submit button change color when they hover over them or are actually working within that field. Also very easy.Here's the problem: Everything works fine in firefox but for some reason, IE apparently does not support adding a background image for <input> tags....?? Because my submit button itself is simply an image that is clicked that reacts to the user's behaviors however in IE, it's just a blank button box; the background image doesn't appear at all; even though in thee input text fields, their respective background images display just fine. here's an example of the code:.HmSubmitBttn { background-image: url(images/GE_cntctHmSubBttn.png); background-repeat: no-repeat; background-position: center top; background-color: none; height: 20px; width: 75px; border: none; float: right; margin: 25px 0px 5px 0px; vertical-align: middle;}.HmSubmitBttn:hover { background-image: url(images/GE_cntctHmSubBttn-Hover.png); background-repeat: no-repeat; background-position: center top;}.HmSubmitBttn:focus { background-image: url(images/GE_cntctHmSubBttn-Hover.png); background-repeat: no-repeat; background-position: center top;}Are there any hacks to make the background feature work for IE? I KNOW there is; I see it all the time and the xhtml that goes into it seems pretty straightforward. What am I missing??

[ShadowMage]

You could use an image input. Ie, <input type='image' ... />But then I think you'd have to use JavaScript to change the image, since the src can't be modified with CSS.

[dsonesuk]

adding an background image to input type="submit" should not be a problem, I've done it numerous times. The only problem I've had is using an image for select dropdown list and that is only in IE6, other IE version above IE6 worked fine.

[dsonesuk]

its background-color: none; you can't use none, use transparent instead.EDIT: when using hover, focus you only need to include the css styling that changes, so .HmSubmitBttn { background-image: url(images/GE_cntctHmSubBttn.png); background-repeat: no-repeat; background-position: center top; background-color: transparent; /* amended by dsonesuk*/ height: 20px; width: 75px; border: none; float: right; margin: 25px 0px 5px 0px; vertical-align: middle;cursor: pointer; /*added by dsonesuk*/}.HmSubmitBttn:hover { background-image: url(images/GE_cntctHmSubBttn-Hover.png);}.HmSubmitBttn:focus { background-image: url(images/GE_cntctHmSubBttn-Hover.png);}will work just as well. Also you might want to include cursor: pointer;

[GE2009]

You could use an image input. Ie, <input type='image' ... />But then I think you'd have to use JavaScript to change the image, since the src can't be modified with CSS.

AH - good point. I did think about that...however it's a submit button; so how would I still maintain it's functionality of calling the form.php script that's in the action attribute if the type is now set to image instead of "submit"?

[dsonesuk]

You wouldn't need too if you remove background-color: none; which is invalid OR set it to transparent;

[ShadowMage]

AH - good point. I did think about that...however it's a submit button; so how would I still maintain it's functionality of calling the form.php script that's in the action attribute if the type is now set to image instead of "submit"?

Try dsonesuk's suggestion first.An image input, according to w3schools reference page:

<input type="image" /> defines an image as a submit button.

So, yeah, it will still behave the same as your submit button.

[Dilated]

Don't know if this has been mentioned yet, I didn't bother reading the entire thread.One way you could do it that wouldn't be especially elegant would be to wrap the text input in a div, give the input a background of "transparent" and then give the div the background image.edit: Ah, didn't see you were talking about a button and not a text input, sorry.

[ShadowMage]

Ah, didn't see you were talking about a button and not a text input, sorry.

I didn't bother reading the entire thread.

Perhaps there's a correlation there...

[Dilated]

Perhaps there's a correlation there...

Yeah, maybe. lol

[GE2009]

(laughs) you guys are funny and yeah; when I tried dsonesuk's method it worked; I wasn't aware that the inputs attributes would remain as the "submit" even if selected as image instead. You learn something new everyday! Alright so one more thing - I got everything to work the way it's supposed to and it looks golden in firefox. But in IE, the button box itself has a tiny img icon in the top left corner that sits in front of the image that I've set to be the submit button. I was thinking that I could just actually insert a src="" value, but then the :hover didn't work anymore; the background would change BEHNID the actual picture in the box. Using js did seem to work fine as an alternate as well. I guess I can wrap the button ruled by css in noscript tags as alternates. But I still can't get rid of that bloody img icon at the top of the button box. Suggestions?

[dsonesuk]

Thats because if you use type image and is not supplied or cannot be found IE does what it does with non found images display an image icon.if you use type submit with the changes i suggested there would be no problem, and it would work cross browser as well.

[GE2009]

you're the man, dsonesuk, your word is truth man. Works like a charm. Kind of annoying that it was such a simple solution but your guys' help is greatly appreciated!Alright, so next question - the :focus attribute for the text fields is ignored in IE but recognized in Firefox. What am I missing here? I'm sure it's something arbitrary that I may have overlooked....but it still has me stumped.

[dsonesuk]

have you tried input[type=text]:focus {...}

[ShadowMage]

Alright, so next question - the :focus attribute for the text fields is ignored in IE but recognized in Firefox. What am I missing here? I'm sure it's something arbitrary that I may have overlooked....but it still has me stumped.

I'm guessing you don't have a DTD. On the w3schools reference page it states:

Note: Internet Explorer 8 (and higher) supports the :focus pseudo-class if a !DOCTYPE is specified.

I'd recommend going with a Strict DTD.

[GE2009]

have you tried input[type=text]:focus {...}

Well......No, I cannot say that I've either tried nor even SEEN that kind of targeted coding before. I'll try it; but what kind of selector is this that uses brackets in CSS?

[GE2009]

dsonesuk,that's a negative on the input[]:focus; the text fields are still reflecting the background that I've designated for them in a normal state, but the :focus pclass wasn't affected.

[dsonesuk]

it will only work for ie8 and above but your page must have doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">OR<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">see http://www.w3schools.com/tags/tag_DOCTYPE.aspEdit: to get the focus to work for other versions of ie you would use javascript to apply a class that would change using onblur and onfocus to the styling you require.

[ShadowMage]

Well......No, I cannot say that I've either tried nor even SEEN that kind of targeted coding before. I'll try it; but what kind of selector is this that uses brackets in CSS?

That's an attribute selector.Have a look at the W3C spec page for a full list of selectors: http://www.w3.org/TR/css3-selectors/

[GE2009]

That's an attribute selector.Have a look at the W3C spec page for a full list of selectors: http://www.w3.org/TR/css3-selectors/

If you guys hadn't already noticed, I avoid js like the plague; but I wound up using it anyway. I'll have to look deeper into those attribute selectors though. Does CSS have no bounds??! (don't answer that, I know it does). Thanks a ton, Gentlemen.