Jump to content
Stef's Coding Community
pnmorrison

removing unwanted borders of input button from sttStyling input fields

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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:
  • Select product:
  • 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.

Share this post


Link to post
Share on other sites

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;)

Share this post


Link to post
Share on other sites

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".

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...