Thread

I often get carried away with styling my forms so that they look and work to the best of the theme. However, there is always some little button or something that I actually DON’T WANT TO CHANGE the CSS for. However, by the time that little element pops-up - it is too late to go back and change the CSS for the whole site.

So this brings up the question of wither or not it is possible to recover the original CSS style of something like an input button. I would assume so - but I can’t find anything on it.

Here is an example of resetting other HTML elements - but this won’t work on something tricky like a form input.

#element {
    background:none;
    border:none;
    bottom:auto;
    clear:none;
    cursor:default;
    /* didn't really know what the default for display should be*/
    /*display:inline;*/
    float:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:medium;
    font-style:normal;
    font-weight:normal;
    height:auto;
    left:auto;
    letter-spacing:normal;
    line-height:normal;
    max-height:none;
    max-width:none;
    min-height:0;
    min-width:0;
    overflow:visible;
    position:static;
    right:auto;
    text-align:left;
    text-decoration:none;
    text-indent:0;
    text-transform:none;
    top:auto;
    visibility:visible;
    white-space:normal;
    width:auto;
    z-index:auto;
}

So as far as I can tell it is the background and border properties that, when changed on an <input>, can never be undone.

Looking at the forms.css file in the install path of Firefox I see that they use “-moz” stuff to define some defaults for form inputs.

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;
  text-rendering: optimizeLegibility;
  line-height: normal !important;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  cursor: text;
  [removed]: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
  text-indent: 0;
  -moz-user-select: text;
}

So, use classes or be more specific with your styles. Not sure there is a reliable way to reset styles for an element to the browser stylesheet (short of copying the browser stylesheet, putting it in your stylesheet, and of course serving the right styles to the right browser).

So, use classes or be more specific with your styles.

Yep, that is what I am doing now.

Not sure there is a reliable way to reset styles for an element to the browser stylesheet (short of copying the browser stylesheet, putting it in your stylesheet, and of course serving the right styles to the right browser).

Like every other problem on the PC - someone eventually finds an answer. I just thought I would check to see if anyone has found this one.

I think the answer is easily known (by re-producing each browser’s styles) but not as practical as other solutions.

Take a look at this CSS Reset

Easiest way to explain it is, set only basic styles for body ie. font and colour, then have a containing div for whole content which has all the other styles, and use classes for the input boxes

Hopefully you understand

Hopefully you understand

yes, but I don’t think you do.  😉