SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    revert to default style

    I have a site where the main style to change the appearance of form submit buttons has been applied very non specifically (ie, it applies to ALL buttons on the site) and i cant change this rule. this default style is to use a background image.

    now on one single page i want the form buttons to appear standard, as they do without any styling; background-image: none; does just that no background at all and it just looks like a string of text.

    how can i get my button to revert to the default style?
    I need someone to protect me from
    all the measures they take in order to protect me

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll have to 'undo' the CSS declarations in question for that page. For instance, use background-image:none to remove a background image specified by another rule.

    The trick is to make sure your 'new' rules are more specific than the ones you want to override. If the 'old' rule has a selector like
    Code:
    .my-button {background-image:url("foo.png")}
    you could add some 'given' element types to the selector to make it more specific:
    Code:
    html body .my-button {background-image:none}
    An even easier way would be if you can assign a specific ID to, say, the <body> tag of the page where you want the default styling.
    Code:
    <body id="standard">
    Then you can use
    Code:
    #standard .button {background-image:none}
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah i understand css specificity but when i apply background: none; it removes both the image we're using and also the standard background on the form buttons. so "Submit" just looks like black text on a white background, like any other string.

    or is this coming from another css rule i havent discovered yet? im heavily in to firebug but just cant track it down.
    I need someone to protect me from
    all the measures they take in order to protect me

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    background:none would remove more than just the image in the background, it would remove the default background-color as well.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stef25 View Post
    yeah i understand css specificity but when i apply background: none; it removes both the image we're using and also the standard background on the form buttons. so "Submit" just looks like black text on a white background, like any other string.
    background:none is equivalent to
    Code:
    background-color:transparent;
    background-image:none;
    background-repeat:repeat;
    background-attachment:scroll;
    background-position:0% 0%;
    Using background-image:none will undo the background image only. Of course, if you previously set the background image using the background shorthand property you've already reset the background colour to transparent. In that case there's no way to get back the original, browser-dependent background. You'll have to settle for using your own background colour, e.g.,
    Code:
    background:#ccc;
    or
    Code:
    background-color:#ccc;
    background-image:none;
    Birnam wood is come to Dunsinane

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you've all missed the real question

    Once you change the appearance of some form controls (like input buttons) then you can't re-instate the original appearance of the button.

    background-image:none will leave you with a square button that looks much like the old IE5 sumbit button. This is because the button is styled by the browsers internal rules and may are not accessible to be changed.

    For example these are just a few of the rules applied from Firefox's form.css for the input button element.

    Code:
    button, 
    input[type="reset"],
    input[type="button"],
    input[type="submit"] { 
      -moz-appearance: button;
      /* The sum of border-top, border-bottom, padding-top, padding-bottom
         must be the same here, for text inputs, and for <select>.  For
         buttons, make sure to include the -moz-focus-inner border/padding. */
      padding: 0px 6px 0px 6px;
      border: 2px outset ButtonFace;
      background-color: ButtonFace;
      color: ButtonText; 
      font: -moz-button;
      line-height: normal !important;
      white-space: pre;
      cursor: default;
      -moz-box-sizing: border-box;
      -moz-user-select: none;
      -moz-binding: none;
      text-align: center;
    }
    
    button {
      /* Buttons should lay out like "normal" html, mostly */
      white-space: normal;  
      text-indent: 0;
    }
    
    *|*::-moz-button-content {
      display: block;
    }
    
    button:active:hover,
    input[type="reset"]:active:hover,
    input[type="button"]:active:hover,
    input[type="submit"]:active:hover {
      padding: 0px 5px 0px 7px;
      border-style: inset;
    }
    
    button::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner,
    input[type="file"] > input[type="button"]::-moz-focus-inner {
      padding: 0px 2px 0px 2px;
      border: 1px dotted transparent;
    }
    
    button:focus::-moz-focus-inner,
    input[type="reset"]:focus::-moz-focus-inner,
    input[type="button"]:focus::-moz-focus-inner,
    input[type="submit"]:focus::-moz-focus-inner,
    input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
      border-color: ButtonText;
    }
    The simplest answer is not to change form elements globally but just to add classes to the ones you want to change.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think you've all missed the real question
    I think not.

    Quote Originally Posted by AutisticCuckoo View Post
    Of course, if you previously set the background image using the background shorthand property you've already reset the background colour to transparent. In that case there's no way to get back the original, browser-dependent background.
    Birnam wood is come to Dunsinane

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Of course, if you previously set the background image using the background shorthand property
    I didn't notice that )) but its not quite correct because you don't even need to have used the shorthand version.

    Just using background-image is enough (in some browsers such as Firefox) as I mentioned above

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right Paul (as usual). I think Opera also uses a bg image for buttons by default.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i changed the shorthand to this

    background-image: url(../img/button_stand.gif);
    background-repeat: no-repeat;
    background-position: center center;
    border:0;

    I then override only background-image, to background-image: none; All good, no background image appears. the default submit button (what im trying to get at) only appears when i turn off border: 0 in the declaration above. using firebug i can just toggle it on and off. but this makes a border appear round all the other buttons that have button_stand.gif as background.

    my css knowledge is quite good and i know this is making very little sense but i swear it comes down to this.

    is this some obscure bug : feature or am i being blind / overlooking something?
    I need someone to protect me from
    all the measures they take in order to protect me

  11. #11
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when you thought you'd seen it all. this fixed it, restoring the default firefox button.

    border: 2px outset buttonFace;

    how many of you have seen that before?
    I need someone to protect me from
    all the measures they take in order to protect me

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stef25 View Post
    the default submit button (what im trying to get at) only appears when i turn off border: 0 in the declaration above. using firebug i can just toggle it on and off. but this makes a border appear round all the other buttons that have button_stand.gif as background.
    You need to specify border:0 only for the buttons that use the background image. If you need to override it, you'll have to specify the borders yourself, but browsers use different default borders, so you won't be able to replicate all browser defaults exactly.

    Normally, the top and left borders have a lighter colour than the bottom and right borders, to create the illusion of a 3D button protruding from the page.
    Birnam wood is come to Dunsinane

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by stef25
    but i swear it comes down to this
    No as i said above once you have set background-image then the image is gone forever in firefox. Some other browsers will re-instate the default state but others won't.

    The same applies for the border as this is tied to specific internal styles in Firefox and you cannot re-instate it because you can't get access to the images/styles that create it on a local system.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    For interests sake this is Firefox's default forms.css file.

    Code:
    /* ***** BEGIN LICENSE BLOCK *****
     * Version: MPL 1.1/GPL 2.0/LGPL 2.1
     *
     * The contents of this file are subject to the Mozilla Public License Version
     * 1.1 (the "License"); you may not use this file except in compliance with
     * the License. You may obtain a copy of the License at
     * http://www.mozilla.org/MPL/
     *
     * Software distributed under the License is distributed on an "AS IS" basis,
     * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
     * for the specific language governing rights and limitations under the
     * License.
     *
     * The Original Code is mozilla.org code.
     *
     * The Initial Developer of the Original Code is
     * Netscape Communications Corporation.
     * Portions created by the Initial Developer are Copyright (C) 1998
     * the Initial Developer. All Rights Reserved.
     *
     * Contributor(s):
     *
     * Alternatively, the contents of this file may be used under the terms of
     * either of the GNU General Public License Version 2 or later (the "GPL"),
     * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
     * in which case the provisions of the GPL or the LGPL are applicable instead
     * of those above. If you wish to allow use of your version of this file only
     * under the terms of either the GPL or the LGPL, and not to allow others to
     * use your version of this file under the terms of the MPL, indicate your
     * decision by deleting the provisions above and replace them with the notice
     * and other provisions required by the GPL or the LGPL. If you do not delete
     * the provisions above, a recipient may use your version of this file under
     * the terms of any one of the MPL, the GPL or the LGPL.
     *
     * ***** END LICENSE BLOCK ***** */
    
    /** 
      Styles for old GFX form widgets
     **/ 
     
    
    @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
    @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    
    *|*::-moz-fieldset-content {
      display: block;
      height: 100&#37;;   /* Need this so percentage heights of kids work right */
    }
    
    /* miscellaneous form elements */
    
    legend {
      padding-left: 2px;
      padding-right: 2px;
      border: none;
      position: static ! important;
      float: none ! important;
    }
    
    fieldset {
      display: block;
      margin-left: 2px;
      margin-right: 2px;
      padding: 0.35em 0.625em 0.75em;
      border: 2px groove ThreeDFace;
    }
    
    label {
      cursor: default;
    }
    
    /* default inputs, text inputs, and selects */
    
    /* Note: Values in nsNativeTheme IsWidgetStyled function 
       need to match textfield background/border values here */
    
    input {
      -moz-appearance: textfield;
      /* The sum of border-top, border-bottom, padding-top, padding-bottom
         must be the same here, for buttons, and for <select> (including its
         internal padding magic) */
      padding: 1px 0 1px 0;
      border: 2px inset ThreeDFace;
      background-color: -moz-Field;
      color: -moz-FieldText;
      font: -moz-field;
      line-height: normal !important;
      text-align: start;
      text-transform: none;
      word-spacing: normal;
      letter-spacing: normal;
      cursor: text;
      -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
      text-indent: 0;
      -moz-user-select: text;
    }
    
    input > .anonymous-div {
      white-space : nowrap;
    }
    
    textarea {
      margin: 1px 0 1px 0;
      border: 2px inset ThreeDFace;
      background-color: -moz-Field;
      color: -moz-FieldText;
      font: medium -moz-fixed;
      text-align: start;
      text-transform: none;
      word-spacing: normal;
      letter-spacing: normal;
      vertical-align: text-bottom;
      cursor: text;
      -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas");
      -moz-appearance: textfield;
      text-indent: 0;
      -moz-user-select: text;
    }
    
    textarea > scrollbar {
      cursor: default;
    }
    
    textarea > .anonymous-div,
    input > .anonymous-div {
      overflow: auto;
      border: 0px !important;
      padding: 0px;
      margin: 0px;
      /* XXXldb I'm not sure if we really want the 'text-decoration: inherit',
         but it's needed to make 'text-decoration' "work" on text inputs. */
      text-decoration: inherit;
    }
    
    select {
      margin: 0;
      border-color: ThreeDFace;
      background-color: -moz-Field;
      color: -moz-FieldText;
      font: -moz-list;
      line-height: normal !important;
      white-space: nowrap !important;
      text-align: start; 
      cursor: default;
      -moz-box-sizing: border-box;
      -moz-user-select: none;
      -moz-appearance: menulist;
      border-width: 2px;
      border-style: inset;
      text-indent: 0;
    }
    
    /* Need the "select[size][multiple]" selector to override the settings on
       'select[size="1"]', eg if one has <select size="1" multiple> */
       
    select[size],
    select[multiple],
    select[size][multiple] {
      /* Different alignment and padding for listbox vs combobox */
      vertical-align: text-bottom;
      padding: 1px 0 1px 0;
      -moz-appearance: listbox;
    }
    
    select[size],
    select[size="1"] {
      /* Except this is not a listbox */
      vertical-align: baseline;
      padding: 0;
      -moz-appearance: menulist;
    }
    
    select > input[type="button"] {
      width: 12px;
      height: 12px;
      white-space: nowrap;
      position: static !important;
      background-image: url("arrow.gif") !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      -moz-appearance: menulist-button;
    }
    
    select > input[type="button"]:active {
      background-image: url("arrowd.gif") !important;
    }
    
    select::-moz-dummy-option { 
      visibility: hidden; 
      content: "XX"; /* demo 8, edge case test 1 */
    }
    
    *|*::-moz-display-comboboxcontrol-frame {
      overflow: -moz-hidden-unscrollable;
      /* This top/bottom padding plus the combobox top/bottom border need to
         add up to the top/bottom borderpadding of text inputs and buttons */ 
      padding-top: 1px;
      padding-bottom: 1px;
      -moz-padding-start: 4px;
      -moz-padding-end: 0;
      background-color: inherit;
      color: inherit;
      white-space: nowrap;
      text-align: inherit;
      -moz-user-select: none;
    }
    
    option {
      display: block;
      min-height: 1em;
      line-height: normal !important;
      -moz-user-select: none;
      text-indent: 0;
    }
    
    select > option {
      padding-top : 0;
      padding-bottom: 0;
      -moz-padding-start: 3px;
      -moz-padding-end: 5px;
    }
    
    option:checked {
      background-color: Highlight ! important;
      color: HighlightText ! important;
    }
    
    optgroup {
      display: block;
      font: -moz-list;
      line-height: normal !important;
      font-style: italic;
      font-weight: bold;
      font-size: inherit;
      -moz-user-select: none;
      text-indent: 0;
    }
    
    optgroup > option {
      padding-left: 20px;
      font-style: normal;
      font-weight: normal;
    }
    
    optgroup:before {
      display: block;
      content: attr(label);
    }
    
    *|*::-moz-dropdown-list {
      z-index: 2147483647;
      background-color: inherit;
      -moz-user-select: none;
      position: static !important;
      float: none !important;
    
      border: 1px outset black !important;
    } 
    
    input[disabled],
    textarea[disabled],
    option[disabled],
    optgroup[disabled],
    select[disabled] {
      -moz-user-input: disabled;
      -moz-user-focus: ignore;
      color: GrayText;
      background-color: ThreeDFace;
      cursor: inherit;
    }
    
    option[disabled],
    optgroup[disabled] {
      background-color: transparent;
    }
    
    /* hidden inputs */
    input[type="hidden"] {
      -moz-appearance: none;
      display: none;
      padding: 0;
      border: 0;
      cursor: auto;
      -moz-user-focus: ignore;
      -moz-binding: none;
    }
    
    /* image buttons */
    input[type="image"] {
      -moz-appearance: none;
      padding: 0;
      border: none;
      background-color: transparent;
      font-family: sans-serif;
      font-size: small;
      cursor: pointer;
      -moz-binding: none;
      -moz-appearance: none;
    }
    
    input[type="image"][disabled] {
      cursor: inherit;
    }
    
    input[type="image"]:focus {
      outline: 1px dotted invert;
    }
    
    /* file selector */
    input[type="file"] {
      -moz-appearance: none;
      white-space: nowrap;
      cursor: default;
      -moz-binding: none;
    
      padding: 0 !important;
      border-style: none !important;
    }
    
    input[type="file"] > input[type="text"] {
      border-color: inherit;
      background-color: inherit;
      color: inherit;
      font-size: inherit;
      height: inherit;
      letter-spacing: inherit;
    }
    
    /* button part of file selector */
    input[type="file"] > input[type="button"] {
      height: inherit;
      font-size: inherit;
      letter-spacing: inherit;
    }
    
    /* radio buttons */
    input[type="radio"] {
      -moz-appearance: radio;
      width: 13px;
      height: 13px;
      margin: 3px 3px 0px 5px;
      padding: 0 !important;
      cursor: default;
      -moz-binding: none;
    
      -moz-border-radius: 100% !important;
    }
    
    /* check boxes */
    input[type="checkbox"] {
      -moz-appearance: checkbox;
      width: 13px;
      height: 13px;
      margin: 3px 3px 3px 4px;
      padding: 0 !important;
      vertical-align: text-bottom;
      cursor: default;
      -moz-binding: none;
    
      -moz-border-radius: 0 !important;
    }
    
    /* common features of radio buttons and check boxes */
    
    input[type="radio"],
    input[type="checkbox"] {
      /* same colors as |input| rule, but |!important| this time. */
      -moz-box-sizing: border-box;
      background-color: -moz-Field ! important;
      color: -moz-FieldText ! important;
      border: 2px inset ThreeDFace ! important;
    }
    
    input[type="radio"][disabled],
    input[type="radio"][disabled]:active,
    input[type="radio"][disabled]:hover,
    input[type="radio"][disabled]:hover:active,
    input[type="checkbox"][disabled],
    input[type="checkbox"][disabled]:active,
    input[type="checkbox"][disabled]:hover,
    input[type="checkbox"][disabled]:hover:active {
      padding: 1px;
      border: 1px inset ThreeDShadow ! important;
      /* same as above, but !important */
      color: GrayText ! important;
      background-color: ThreeDFace ! important;
      cursor: inherit; 
    }
    
    input[type="checkbox"]:focus,
    input[type="radio"]:focus {
      border-style: groove !important;
    }
    
    input[type="checkbox"]:hover:active,
    input[type="radio"]:hover:active {
      background-color: ThreeDFace ! important;
      border-style: inset !important;
    }
    
    *|*::-moz-radio {
      width: 4px;
      height: 4px;
      background-color: -moz-FieldText ! important;
      -moz-border-radius: 3px;
    }
    
    /* buttons */
    
    /* Note: Values in nsNativeTheme IsWidgetStyled function 
       need to match button background/border values here */
    
    button, 
    input[type="reset"],
    input[type="button"],
    input[type="submit"] { 
      -moz-appearance: button;
      /* The sum of border-top, border-bottom, padding-top, padding-bottom
         must be the same here, for text inputs, and for <select>.  For
         buttons, make sure to include the -moz-focus-inner border/padding. */
      padding: 0px 6px 0px 6px;
      border: 2px outset ButtonFace;
      background-color: ButtonFace;
      color: ButtonText; 
      font: -moz-button;
      line-height: normal !important;
      white-space: pre;
      cursor: default;
      -moz-box-sizing: border-box;
      -moz-user-select: none;
      -moz-binding: none;
      text-align: center;
    }
    
    button {
      /* Buttons should lay out like "normal" html, mostly */
      white-space: normal;  
      text-indent: 0;
    }
    
    *|*::-moz-button-content {
      display: block;
    }
    
    button:active:hover,
    input[type="reset"]:active:hover,
    input[type="button"]:active:hover,
    input[type="submit"]:active:hover {
      padding: 0px 5px 0px 7px;
      border-style: inset;
    }
    
    button::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner,
    input[type="file"] > input[type="button"]::-moz-focus-inner {
      padding: 0px 2px 0px 2px;
      border: 1px dotted transparent;
    }
    
    button:focus::-moz-focus-inner,
    input[type="reset"]:focus::-moz-focus-inner,
    input[type="button"]:focus::-moz-focus-inner,
    input[type="submit"]:focus::-moz-focus-inner,
    input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
      border-color: ButtonText;
    }
    
    button[disabled]:active, button[disabled],
    input[type="reset"][disabled]:active,
    input[type="reset"][disabled],
    input[type="button"][disabled]:active,
    input[type="button"][disabled],
    select[disabled] > input[type="button"],
    select[disabled] > input[type="button"]:active,
    input[type="submit"][disabled]:active,
    input[type="submit"][disabled] {
      /* The sum of border-top, border-bottom, padding-top, padding-bottom
         must be the same here and for text inputs */
      padding: 1px 7px 1px 7px;
      border: 1px outset ButtonShadow;
      color: GrayText;
      cursor: inherit; 
    }
    
     /*
      * Make form controls inherit 'unicode-bidi' transparently as required by
      *  their various anonymous descendants and pseudo-elements:
      *
      * <textarea> and <input type="text">:
      *  inherit into the XULScroll frame with class 'anonymous-div' which is a
      *  child of the text control.
      *
      * Buttons (either <button>, <input type="submit">, <input type="button">
      *          or <input type="reset">)
      *  inherit into the ':-moz-button-content' pseudo-element.
      *
      * <select>:
      *  inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and
      *  the <optgroup>'s ':before' pseudo-element, which is where the label of
      *  the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
      *  so they need no special rules.
      */
    textarea > .anonymous-div,
    input > .anonymous-div,
    *|*::-moz-button-content,
    *|*::-moz-display-comboboxcontrol-frame,
    optgroup:before {
      unicode-bidi: inherit;
    }
    
     /*
      * Force the text control child of file input controls to have left-to-right
      * directionality. Otherwise filenames containing right-to-left characters
      * will be reordered with chaotic results.
      */
    input[type="file"] > input[type="text"] {
      direction: ltr !important;
      text-align: inherit;
    }
    
    @media print {
      input, textarea, select, button {
        -moz-user-input: none !important;
      }
    
      input[type="file"] { height: 2em; }
    }
    There are other rules in html.css and probably some others as well.

  15. #15
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a colleague found border: 2px outset buttonFace; in a file called forms.css somewhere in firefox's files on XP. on vista this file seems a lot harder to track down.
    I need someone to protect me from
    all the measures they take in order to protect me

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by stef25
    how many of you have seen that before?
    It's in the code I gave you in post#6

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    a colleague found border: 2px outset buttonFace; in a file called forms.css somewhere in firefox's files on XP
    Are you not reading my posts ( I mentioned forms.css in post#6 and supplied you with the whole stylesheet in post#14)

  18. #18
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :-) hah ha ... sorry Paul
    I need someone to protect me from
    all the measures they take in order to protect me

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    when you thought you'd seen it all. this fixed it, restoring the default firefox button.
    It won't fix it in Firefox 3 I'm afraid . It does seem to work in Firefox 2 though.

    I tried replacing all the input styles from forms.css and this seem to have no effect on FF3. There may well be additional styles to trigger a reset but it's unlikely.

    Of course you still have all the other browsers to cater for also (like safari) so you would still be better off not changing anything globally .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •