We help IT Professionals succeed at work.

Default border settings for SELECT and INPUT

muellerfan
muellerfan asked
on
Medium Priority
852 Views
Last Modified: 2012-05-05
Hi,

I am creating a toolbar that has input and select elements in it.  I inject this toolbar into pages that have their own style.  I have no control over their style.  Often, these pages will contain:

*      { margin: 0px; padding: 0px; border: 0px; }

This makes my input and select (in firefox) elements lose their border.  So, I want to put the proper style on my elements inline.  

I'm looking for a style that makes my elements look normal no matter what other css is in the page (especially the line above).  Just changing the border-width does not work.  I need all of the border properties.

Thank you!
Comment
Watch Question

Commented:
<input style="border: 2px #cccccc solid;">

SIZE COLOR STYLE

Is that what you're asking for ???  Not really clear on the Q

-Sam

Author

Commented:
Sorry, I'll try to be more clear.

I need a style that will undo the border: 0px and make the input and select look exactly like they would look if there were no styles on the page.
Commented:
Add this to your stylesheet below the * rule:

input { border: outset 2px; }
select { border: inset 2px; }

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Well, that by itself didn't work, but it pointed me in the right direction.  Here is my final in case anyone else is interested:

This was tested for input=text, input=submit, and select

.inputtext {
            border: solid;
            border-top-width: 2px;
            border-right: 1px solid #b5b5b5;
            border-bottom: 1px solid #b5b5b5;
            border-left-width: 2px;
}

select {
            border: inset;
            border-top-width: 2px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 2px;
}

.inputsubmit {
      border: outset;
      border-top-width: 1px;
      border-right-width: 2px;
      border-bottom-width: 2px;
      border-left-width: 1px;
}

option {
      padding-right:3px;
      padding-left:3px;      
}
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.