Jump to content

Removing text field borders


GE2009

Recommended Posts

Alright; I'm trying to create forms that are a bit more "out of the given box" than the default text field that's generated when using text fields and here is my dilemma. I used a simple code that simply says to remove the borders in and replace them with a background that I have created in Illustrator. Here's what it looks like:.input_field { font-size:0.9em; font-family: "Century Gothic", Tahoma, "Myriad Pro", sans-serif; border: none; background-image: url(../images/trs_Bodprts_Field_HmCntctForm%20Bkg.png); background-repeat: no-repeat; width: 180px; height: 20px; padding: 0px 0px 0px 3px;}.input_field:focus { background-image: url(../images/trs_Bodprts_Field_HmCntctFormRoll%20Bkg.png); background-position: left top; background-repeat: no-repeat; color: #fff;}In firefox, it renders perfectly fine with the image holding the background of the field without the borders present in either mouse state (focused or not) whereas in IE, when the mouse isn't focused in the box, no matter WHAT I do, I can't get the borders to go away. Only when in the focused state does it employ the "border:none;" and only show the background that I've annotated.What's even more annoying is that in another website that I have up it displays in IE just fine which adds to my vexing quandary. Why did it work last time and not this time? I have a meta-cookie for anyone that can help me sort this one.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...