Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Default border settings for SELECT and INPUT

Posted on 2006-03-31
4
Medium Priority
?
824 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!
0
Comment
Question by:muellerfan
  • 2
4 Comments
 
LVL 16

Expert Comment

by:sam85281
ID: 16348582
<input style="border: 2px #cccccc solid;">

SIZE COLOR STYLE

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

-Sam
0
 
LVL 1

Author Comment

by:muellerfan
ID: 16350147
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.
0
 
LVL 4

Accepted Solution

by:
noamattd earned 900 total points
ID: 16355274
Add this to your stylesheet below the * rule:

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

0
 
LVL 1

Author Comment

by:muellerfan
ID: 16355815
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;      
}
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month15 days, 5 hours left to enroll

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question