removing unwanted borders of input button from sttStyling input fields

[pnmorrison]

In this article at smashing magazine here:

 

http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

 

section 5 Custom input focus describes how to style form fields.

 

input { border: 1px solid #888; padding: 2px; font-size: 1em; background-color: #F8F8F8; }

input:focus { border-color: #000; background-color: #FFFE9D; }

input.image { border: 0; padding: 0; }

 

HOWEVER in my form i have a button (an image) which is an input and i dont want this to be styled the same way. I gave this input a class of image to exclude it from the input style (as above) but this does not work. What i am left with is a button with a an unwanted border around it.

 

Does anyone know how i get around this. Many thanks.

[Wickham]

I used these styles:-

input { border: 1px solid red; padding: 2px; font-size: 1em;

 

background-color: #F8F8F8; }

input:focus { border-color: lime; background-color: #FFFE9D; }

input.image { border: 0; padding: 0; }

input { background: url(images/cornerBR.gif); }

 

which are the same as your's except that I changed to color to red, plus the background image; and this markup:-

 

• Name:
• email:
• Message:
• Type your <p>message here></p>
• Select product:

• Component

  1

  Component

  2

  Component 3
  Component 4

• Service

  Manual

  Photographs

  Carrying

  case

• Male

  Female

  Child

 

where the first li tag for "name" has had the class="image" added and does NOT show a red border.

[pnmorrison]

i cannot apply this to my form as my forms code is this:

 

Telesales Users, Set Account Number

* indicated required fields

Account Number *

 

Therefore if i style input it as also and unwantingly styling the button even when i use input.image {border:0;)

[Wickham]

I've just used your code which has an

 

There is a border around the Account Number input box where there is no class="image".

[PicnicTutorials]

When it comes to inheritance, form elements are hell to deal with. Therefore, eliminate the problem from the get-go!

 

Be more specific with your original input rule. Either just target it with a class instead or if they are on dif pages just say #home input.

 

I had to deal with this same problem recently. I originally just said as you did - input: yada yada. Well I eventually got to the point were I couldn't reverse all the rules. So instead, I went back and targeted the original input rules better.