Turn off FF3s stupid form widgets?

buttons · 2008-01-15 14:47:46

I run black themes on my computers, which tends to make firefox look spotted. I've solved the problem in FF2 by using Stylish and a heavily modified userContent.css, as well as the Nice Firefox Forms userstyle. Except, none of these things make any difference in FF3.

I've tried copying over my old forms.css, but FF3 still insists on using form widgets I can barely see against the stark white of most websites out there. And before you ask me why I don't just use system colours on websites, it's because a) many sites refuse to display content if this is the case, and b) vimperator is subject to de-colourisation as well, and you can't see link hints if you change to system colours.

So, how do I get rid of them?

X/ax · 2008-01-15 16:35:16

Bit on the side here. But could I ask for your (FF2) usercontent.css (And other files that make your websites look pretty in firefox using dark themes)?
I'm a bit bugged that on some websites, I'm not able to type/read anything, thanks to undefined things (Like they defined their background into white, but the letters color are not defined, resulting in system colors kicking in, making the stuff unreadable)

Thanks in advance.

buttons · 2008-01-15 17:42:07

Step 1) Install Stylish

Step 2) Create a new one, called Dark TextBoxes Fix (or something), and put this in it:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http), url-prefix(file) {

pre, input, textarea {
   color: black !important;
   background: white !important;
   border-left-color: gray !important;
   border-right-color: gray !important;
   border-top-color: gray !important;
   border-bottom-color: gray !important;
}

/* Uncomment this part if you also want to apply to forms and the like. */
input:not([type="button"]):not([type="checkbox"])
:not([type="submit"]):not([type="reset"]), 
select {
    color: black !important;
    border-left-color: gray !important;
    border-right-color: gray !important;
    border-top-color: gray !important;
    border-bottom-color: gray !important;
}
 
}

Step 3: Install the Nice Firefox Forms userstyle I linked above, or copy mine, since I've got a bug fixed relating to dark themes (unreadable button text). Just create a new one, call it Nice Firefox forms, and put this in it:

/*******
 * Mac OS X look contribution by
 *   phiw - Philippe Wittenbergh (phiw@l-c-n.com) http://emps.l-c-n.com/
 *   hiro - NAKAJIMA Hiroki http://homepage.mac.com/travellers/software/Firefox/aquafirefox_en.html
 * 
 * last updated 2006.02.06
 *******/

/*******
 * Windows look contribution by
 *   akirasan - AkiraSan http://www.akirasan.net
 *       Use this code at your own risk.
 *       Making a backup of your valuable data is never a bad idea.
 *       I am not responsible for any data loss, physical injuries, or mental traumas resulting from using this code.
 *       If you want to further develop, improve or modify this code, feel free to do so.
 *       I'll appreciate feedback and if you make this code available for distribution,
 *       a link back to my blog (http://www.akirasan.net)
 * 
 * last updated 28.05.2007
 *******/


/* Set default namespace to HTML */
@namespace url(http://www.w3.org/1999/xhtml); 
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

  /***********************  ~364  ***********************/
  /* common features of radio buttons and check boxes */

  input[type="radio"],
  input[type="checkbox"] {
      background-color: transparent  !important;
      border:           none         !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 {
      background-color: transparent  !important;
      color:            inherit      !important;  
      border:           none         !important;
  }

  input[type="checkbox"]:focus,
  input[type="radio"]:focus {
      border-style: none  !important;
  }

  input[type="checkbox"]:hover:active,
  input[type="radio"]:hover:active {
      background-color:  transparent  !important;
      border-style:      none         !important;
  }

/*  *|*::-moz-radio {
      background-color: transparent  !important;
  }*/
  
  
  
  /* --------------------------------------------------------------------------
   *
   *    modified by phiw - Philippe Wittenbergh. phiw@l-c-n.com  emps.l-c-n.com
   *
   * -------------------------------------------------------------------------- */
  
  /*  --- Font Setting --- */
  
  html select,
  html input,
  html input[type="submit"],
  html input[type="reset"],
  html input[type="password"],
  html input[type="file"],
  html input[type="text"],
  html input:not([type]) {
      font-size: small;
  }


  /* --- Color Setting --- */

  html input[type="reset"],
  html input[type="submit"],
  html input[type="file"] {
      color: #1e1e1e !important; /* soft black */
  }

  html input,
  html textarea {
      color: #1e1e1e;
  }

  html button,
  html input[type="button"] {
      color: #1e1e1e !important;
  }

  /* --- Input, textarea  --- */

  html input,
  html input[type="text"],
  html input[type="password"],
  html textarea {
      background-color: -moz-Field;
      background-repeat: repeat-x;
      background-position: 0 0;
      -moz-border-radius: 0;
      padding: 1px 0 1px 3px;
  }

  html input,
  html textarea {
      border-top: 1px solid #616365;
      border-right: 1px solid #a0a3a5;
      border-bottom: 1px solid #bbbdbf; 
      border-left: 1px solid #616365;
  }

  *[dir="rtl"] input[type="text"],
  *[dir="rtl"] input[type="password"],
  *[dir="rtl"] input:not([type]),
  *[dir="rtl"] textarea {
      padding: 1px 3px 1px 0;
  }

  html input[type="image"] {
      border:none;
      background-image:none;
      padding:0;
  }

  /* --- Radio Buttons --- */
/*  *|*::-moz-radio {
      border: 0 none !important;
      background-color: transparent !important;
  }*/

  html input[type="radio"] {
      -moz-appearance: none;
      width: 13px !important;
      height: 13px !important;
      margin: 3px 5px 0;
      background: transparent no-repeat center center  !important;
      vertical-align: baseline;
      border: 0 none !important;
      outline:none !important;
      -moz-border-radius: 0 !important;
  }

  html input[type="radio"]:checked {
      background: transparent no-repeat center center  !important;
      border: 0 none !important;

  }


  /* --- Check Boxes --- */

  html input[type="checkbox"] {
      width: 13px !important;
      height:13px !important;
      margin: 1px 2px 3px 3px;
      vertical-align: text-bottom;
      -moz-border-radius: 0 !important;
      -moz-appearance: none;            /*akirasan*/
  }

  html input[type="checkbox"],
  html input[type="checkbox"]:checked{
      background: transparent no-repeat center center  !important;
      border: 0 none !important;
  }

  html input[type="radio"]:focus,
  html input[type="checkbox"]:focus {
      border: 0 none !important;
  }

  /* --- Buttons, Submit, Reset --- */

  html input[type="reset"],
  html input[type="submit"],
  html input[type="file"] > input[type="button"] {
      background: #efeded repeat-x 50% 65%  !important;
      text-indent: 0 !important; /* beat those pesky ImageReplacement techniques */
      padding: 1px 4px !important;
      margin: 0;
      border: 2px solid !important;
      -moz-border-bottom-colors: #616365 #cecece;
      -moz-border-left-colors: #797b7f #fff;
      -moz-border-right-colors: #616365 #cecece;
      -moz-border-top-colors: #797b7f #fff;
      -moz-border-radius: 1px !important;
      letter-spacing:0 !important
  }

  html button,
  html input[type="button"],
  html button[disabled],
  html input[type="button"][disabled] { /* less strict, allows author styling */
      background: #efeded repeat-x 50% 65%;
      text-indent: 0;
      padding: 1px 4px;
      margin: 0;
      border: 2px solid;
      -moz-border-bottom-colors: #616365 #cecece;
      -moz-border-left-colors: #797b7f #e8e8e8;
      -moz-border-right-colors: #616365 #cecece;
      -moz-border-top-colors: #797b7f #e8e8e8;
      letter-spacing:0;
      -moz-border-radius: 1px;
  }
  button[disabled]:active,
  input[type="button"][disabled]:active {
      padding: 1px 4px;
      border: 2px solid;
  }

  /* --- input type=file --- */

  html input[type="file"] {
      background:transparent !important;
  }

  html input[type="file"] > input[type="text"] {
      margin: 0 1px 0 0;
      background-color: #fff !important;
  }

  html input[type="file"] > input[type="button"] {
      margin: 0 1px !important;
  }

  /* --- Select Options --- */

/*  *|*::-moz-display-comboboxcontrol-frame {
      padding: 1px 4px;
  }

  *|*::-moz-dropdown-list {
      border: none !important;
      border-color:transparent  !important;
      background-color: #fff !important;
  }*/

  html select {
      color: -moz-FieldText;
      background: #fff ;
      border: 1px solid #797b7f;
      border-color: #797b7f #999 #999 #797b7f;
      padding: 0;
      direction: ltr;
  }
  *[dir="rtl"] select,
  * select[dir="rtl"] {
      direction: rtl;
  }

  html select[multiple],
  html select[size],
  html select[size][multiple] {
      padding: 0;
  }

  html select:not([size]):not([multiple]),
  html select[size="0"],
  html select[size="1"] {
  /*background: rgb(246, 246, 246) url("resource://gre/res/forms-grad.png") repeat-x bottom right !important;*/
      background: rgb(246, 246, 246) repeat-x bottom right  !important;
      color: #2e2e2e !important;
      height:auto !important;
      border: 2px solid !important;
      -moz-border-top-colors: #797b7f #fff;
      -moz-border-right-colors: #616365 #cecece;
      -moz-border-bottom-colors: #616365 #cecece;
      -moz-border-left-colors: #797b7f #fff;
      -moz-box-sizing: border-box !important;
      -moz-border-radius: 1px !important;
      padding:0 !important;
  }
  html select:not([size]):not([multiple]):focus,
  html select[size="0"]:focus,
  html select[size="1"]:focus,
  html select:not([size]):not([multiple]):hover:active,
  html select[size="0"]:hover:active,
  html select[size="1"]:hover:active {
      -moz-border-top-colors: #616365 #fff;
      -moz-border-right-colors: #797b7f #cecece;
      -moz-border-bottom-colors: #797b7f #cecece;
      -moz-border-left-colors: #616365 #fff;
  }

  html optgroup,
  html option {
      background:transparent;
      font-family:inherit;
      font-size:inherit;
  }

  html optgroup:before {
      font-style:normal;
      font-weight:normal;
      padding: 2px 5px 0 5px;
  }
  html select:not([size]):not([multiple]) optgroup:before,
  html select[size="0"] optgroup:before,
  html select[size="1"] optgroup:before {
      color: #727272;
  }

  html select:not([size]):not([multiple]) option,
  html select[size="0"] option,
  html select[size="1"] option,
  html select:not([size]):not([multiple]) optgroup,
  html select[size="0"] optgroup,
  html select[size="1"] optgroup {
      background: transparent !important;
      color: inherit !important;
  }
  html select:not([size]):not([multiple]) option:hover,
  html select[size="0"] option:hover,
  html select[size="1"] option:hover {
      background-color: Highlight ! important;
      color: HighlightText ! important;
  }
  html option:checked {
      background-color: Highlight ! important;
      color: HighlightText ! important;
  }


  html select > input[type="button"],
  /*html select > input[type="button"]:focus,*/
  html select > input[type="button"]:hover:active {
      background-color: transparent !important;
      background-repeat: no-repeat !important;
      background-position:  45% 50% !important;
      outline: none;
      margin: 0 !important;
      border-width: 0 2px !important;
      border-style: solid !important;
      -moz-border-left-colors: #a3a3a3 transparent !important;
      -moz-border-right-colors: transparent transparent !important;
      padding: 0 6px !important;
  }

  *[dir="rtl"] select > input[type="button"],
  *[dir="rtl"] select > input[type="button"]:hover:active,
  select[dir="rtl"] > input[type="button"],
  select[dir="rtl"] > input[type="button"]:hover:active {
      -moz-border-right-colors: #a3a3a3 transparent !important;
      -moz-border-left-colors: transparent transparent !important;
      background-position:  60% 50% !important;
  }

  /* -- focus ring - mac specific code -- maybe use outline: 1px dotted invert for Linux ? -- disabled, this reverts to the default behaviour, I think. */

  html input[type="reset"]:focus,
  html input[type="submit"]:focus {
      color:#262626 !important;
  }

  /* --- disabled widgets --- */


  html input[type="reset"][disabled],
  html input[type="submit"][disabled],
  html input[type="file"][disabled],
  html select[disabled],
  html select[disabled] option,
  html option[disabled] {
      color:#727272 !important;
  }
  html input[disabled],
  html textarea[disabled],
  html option[disabled],
  html optgroup[disabled],
  html select[disabled],
  html select[disabled]>* {
      -moz-user-input: disabled;
      -moz-user-focus: ignore;
  }

  html select[disabled] > input[type="button"] {
      border:none;
      border-left:2px solid;
      -moz-border-left-colors: #b3b3b3 transparent;
  }

  html option[disabled],
  html optgroup[disabled] {
      background-color: transparent;
  }

  html input[type="radio"][disabled],
  html input[type="radio"][disabled]:active,
  html input[type="radio"][disabled]:hover,
  html input[type="radio"][disabled]:hover:active,
  html input[type="checkbox"][disabled],
  html input[type="checkbox"][disabled]:active,
  html input[type="checkbox"][disabled]:hover,
  html input[type="checkbox"][disabled]:hover:active {
      border: 0 none !important;
      background-color: transparent !important;
      outline-width: 0 !important;
  }

  html select[disabled],
  html input[disabled],
  html textarea[disabled],
  html button[disabled],
  html input[type="checkbox"][disabled],
  html input[type="radio"][disabled],
  html input[type="button"][disabled],
  html input[type="reset"][disabled],
  html input[type="submit"][disabled] {
      opacity: 0.6;
  }

  html input[type="file"][disabled] > * {
      opacity:1.0 !important;
  }



  /****************************************************************************\
    :CHANGES: void
  \****************************************************************************/

  input[type="file"] > input[type="text"],
  html input:not([type]),
  html input[type="text"],
  html input[type="password"],
  html textarea {
      -moz-border-radius: 3px;
  }

  /**
   *  BASE 64 IMAGES
   */
  html input,
  html input[type="text"],
  html input[type="password"],
  html textarea {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQAwNC45LjE4xKRlPwAAACF0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgNC4w6iYndQAAACJJREFUeJxjXLxk2WYGJMDCwMDQiyzA+P//f2Q+AxMDGgAAJwEGM2kcXr8AAAAASUVORK5CYII=");
  }
  html input[type="radio"] {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAG9SURBVCjPfZLLaiJBFIYrBHyK7GYZHPIAWc4ziCIYRFy4cKOgYCO46IUuFDR4GUTTm8aF4kaia0FFwY1CIl5oFFva0YwGaTD2JWdOCQFJ4hR8FFWn/lOnzl8EAMgHJpPJaDabi1arVbTZbGC320Wn01l0uVzG03Mfhw0IY7FYlHA4PG+1WvJwOIR2uy0nEgnR7XYrHo+H8fl8l6eie8y86fV6qqZp8JnBYKAGAoG/DMPcH0UouMWStEaj8YYDztHtdt9CoZDGsuwtQQHv9/ufMRvIsnwWGk+lUk+RSIQn9NE8z79g/dDv90EURViv17DZbI4zXdN9Gq9UKi/RaFQk+JZDvV5XaSbKZDL5lvF4DJ1OR43H4wficDikarW6nU6nMJvNQJKkL9B9Gm82m9t0Ov2HeL3ex1gsJqxWK9jtdmeh8XK5LHAc90geOO6O+jAajf7bvcVioWUyGaVQKPwie0X/GQwGC8gWa9dxwGfm87mey+W22Wz299GnvfJuxCw/0DgWfdBLpdIrFS+XSxAEQa/Vaq94g44CNp/PG46iw169RtevcHGBxt2gD0Vsq4RdgmQyKaGgiIKb07/3DxehBztkriL/AAAAAElFTkSuQmCC")  !important;
  }
  html input[type="radio"]:checked {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAABGdBTUEAANlkkQC7WgAAACBjSFJN    AAB5FwAAgOgAAOvlAACGZQAAgC4AAN3gAAA5EwAALfFDOSc6AAAACXBIWXMAAAsTAAALEwEAmpwYAAABx0lEQVQoz31SOWsCURB+BNbC3xFSp9RGGzvriCAICoImneAWaqULshALC8HEAwQjJForsTCFCBtZzCLieuGBFh6YwlgIKpN5SxI0kDz4ePtm5pvjmyUAQL5hMpnOzWYzb7FYClarVbTZbAWHw8G7XK7z47jvYAZhx0ApFov16vX6x3A4BEmSPtLpdN/tdksIO8uyZ8ckFrNJnU5nt9/v4TcGg8EuEAi8+Xw+ViEh4RLbkURR3OKBv9BoNLZIlDiOuyQ4AxcMBl9lWYbNZgPdbheMRiOoVCrlpm9qp/5UKiXwPM8ROnQ+n18KgkCzgU6nw/rkBxqNRrFTf7FYXIbD4QJBhWrVanVHM1Go1eoTEsMw0O/3odfrAY6wi0QiAnE6nS/lcvl9NBrBeDwGvV5/QtJqtYqd+mu12nsikagQr9d7jx/NxWIB6/UaWq0WGAwGhUBv+qZ26sf2mpmHzB15fHq68ng8TdzLv+rN5/N9Mpls5nI5rbInlPEWVZEnk8kBD/zGbDY7ZLNZGTvy/SyXwu/334RCoXapVFpS8mq1gul0eqhUKkus0I7H49coOXNC+qp4gRV5lPUZVRKj0egz/lY8Ei6O4z4Bnd/QpvegPQoAAAAASUVORK5CYII=")  !important;
  }
  html input[type="checkbox"],
  html input[type="checkbox"]:checked{
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAE6SURBVCjPhZI9bipBEISremYX9g82sHPkKzglQYgrcIF3Bl/ByTuUJRLA+BgkpMgae0fTPY6QLNmYlkodfWr1p+J6va4BPAFYkGxFBN/jnLvkXURenHP/PYCn1Wr1b7lc3vd9P8aVOZ/Pn/v9/mG328EDWMzn87vZbDbOOV9j0Pf9OMZ4dzgcFp5kN51Oq5QS/oJIom3byjnXeTOjqkJVQfJXkCTMDKoKM6MnyZQShmGAiFy9ZGZIKQEAPUmEEBBCgHPuKqSqAAARgW+aRoqiAMmbUM4ZdV2L77pOyrJEWZY3oRgjqqoSP5lMfFVV8N7f/Mk5h6ZpvG/bdsg5p9FoJCIif9izlJLVdT1IURSvx+PxQ1Xzt8r8iJnl0+n0ISKvPsb4vNlsuu12+0iyuRi67IsgkkFV30IIz18cwI1NeExqHQAAAABJRU5ErkJggg==")  !important;
  }
  html input[type="reset"],
  html input[type="submit"],
  html input[type="file"] > input[type="button"] {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNS4xMS4yN6/1yKEAAAAhdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIDQuMOomJ3UAAABhSURBVHic7dPBCYAwDEZhW1xCwZS6/1JqelYHCHEC5R0EEfKfP94hkOTuYweWCQoYMGDAgPfr9+NkcFGFcGvfFSFctTmB/I61TAzOIi8Xa6FFYcVkZgMq5swu9IdXCPi4C6HeHFixIGPzAAAAAElFTkSuQmCC")  !important;
  }

  html input[type="reset"]:focus,
  html input[type="submit"]:focus,
  html input[type="reset"]:hover,
  html input[type="submit"]:hover,
  html input[type="reset"]:hover:active,
  html input[type="submit"]:hover:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNS4xMS4yN6/1yKEAAAAhdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIDQuMOomJ3UAAABjSURBVHic7dPBCYBADERRN9iEu7CWov23oWL2JnoOsQLl30TInB8ZGEhy97kDEYICBgwYMOBz+uO8GFx3pbBBqBTS6oVWb9qcQL5jLQODY4awlvxRdTKzCV0UYQv94RUCvuYGx8ocsZqoiv8AAAAASUVORK5CYII=")  !important;
  }

  html button,
  html input[type="button"],
  html button[disabled],
  html input[type="button"][disabled] { /* less strict, allows author styling */
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNS4xMS4yN6/1yKEAAAAhdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIDQuMOomJ3UAAABhSURBVHic7dPBCYAwDEZhW1xCwZS6/1JqelYHCHEC5R0EEfKfP94hkOTuYweWCQoYMGDAgPfr9+NkcFGFcGvfFSFctTmB/I61TAzOIi8Xa6FFYcVkZgMq5swu9IdXCPi4C6HeHFixIGPzAAAAAElFTkSuQmCC");
  }
  html button:focus,
  html input[type="button"]:focus,
  html button:hover,
  html input[type="button"]:hover,
  html button:hover:active,
  html input[type="button"]:hover:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNS4xMS4yN6/1yKEAAAAhdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIDQuMOomJ3UAAABjSURBVHic7dPBCYBADERRN9iEu7CWov23oWL2JnoOsQLl30TInB8ZGEhy97kDEYICBgwYMOBz+uO8GFx3pbBBqBTS6oVWb9qcQL5jLQODY4awlvxRdTKzCV0UYQv94RUCvuYGx8ocsZqoiv8AAAAASUVORK5CYII=");
  }
  html select:not([size]):not([multiple]),
  html select[size="0"],
  html select[size="1"] {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAARCAYAAAAcw8YSAAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABZSURBVHjaYvr//z8DQAAxMQIBQAAxMTAwMAIEEIhgAgggMAsggMAEQACBuQABBCYAAgjMBQggMAsggMAsgAACswACCMwCCCAwCyCAwCyAAAITAAEEJgACDAACqAM55WzqjgAAAABJRU5ErkJggg==")  !important;
  }
  html select > input[type="button"],
  /*html select > input[type="button"]:focus,*/
  html select > input[type="button"]:hover:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAZCAYAAADTyxWqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAACF0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgNC4w6iYndQAAALdJREFUeJzt1E0KgzAQhuHXaqEV3HSVg8z9TzBXEXHTH6ykmxSETkZbsii0szMZH744ahVjpFTtikl/7KNq1hpEpAZqYFbV2et1kyWoA25Al67fxxbQkJaGNdDEDOhZLphLVhvQEjQxbwAnYG+sT7kbqpLfpplMRBqgJZ/srKr3TVhCRidEC7xguQFMQMjsBTLPzcTSEXoDDEBvHdFLZoEuBBumKSIH4AhcVPXq9RZ9Nb73f/Yj2AOpzz2UFWQSawAAAABJRU5ErkJggg==")  !important;
  }

Step 4: Replace your forms.css, which is found in /opt/mozilla/lib/firefox/res, or /opt/swiftfox/res, or blah blah blah/res, with this:

/* ***** 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%;   /* 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="0"],
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; }
}

What this does (go ahead and diff it, it's pretty informative) is remove some !important tags from firefox's own forms, allowing the stylish ones to override them. Without this, any attempt at full styling is going to look very strange. Make a copy of it somewhere so you can overwrite firefox's whenever you do an upgrade.

And then that's it! Web pages will look perfectly natural.

Still need to know how I can keep this in FF3, though!

Last edited by buttons (2008-01-15 17:45:15)

Evanlec · 2008-04-15 22:13:56

I would also like to know how to solve this definitively for ff3

Evanlec · 2008-04-16 20:29:33

has anyone solved this?

Arch Linux

#1 2008-01-15 14:47:46

Turn off FF3s stupid form widgets?

#2 2008-01-15 16:35:16

Re: Turn off FF3s stupid form widgets?

#3 2008-01-15 17:42:07

Re: Turn off FF3s stupid form widgets?

#4 2008-04-15 22:13:56

Re: Turn off FF3s stupid form widgets?

#5 2008-04-16 20:29:33

Re: Turn off FF3s stupid form widgets?

Board footer