Default border settings for SELECT and INPUT

Posted on 2006-03-31
Last Modified: 2012-05-05

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!
Question by:muellerfan
    LVL 16

    Expert Comment

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


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

    LVL 1

    Author Comment

    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.
    LVL 4

    Accepted Solution

    Add this to your stylesheet below the * rule:

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

    LVL 1

    Author Comment

    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 {

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    746 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now