Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Firefox (css) boutons radios, input et textarea plus jolis par défaut

Sylphe

Merci Alain.g ! Je n'ai plus rien d'anormal avec ton code.

Alain.g

En fait si, par exemple pour l'image de fond dont je parle à la fin, si l'auteur définit une couleur avec la propriété background-color, alors l'image gardera le dessus sur la couleur. C'est d'ailleurs le cas du formulaire dans lequel je suis entrain d'écrire en ce moment précis 😃

Donc il serait plus prudent de ne pas utiliser d'image de fond, même si c'est plus stylé qu'une simple couleur.
En supprimant l'image de fond et en supprimant la marge de 1px :

/* Text inputs */

input[type=text],
input[type=password],
input:not([type]),
textarea {
  border:1px inset ThreeDShadow;
}

/* Buttons */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
select, select:not([size]), select[size="0"], select[size="1"] {
  color: ButtonText;
  background-color: Window;
  border: 1px outset ThreeDShadow;
}


/* Radio buttons */

input[type="radio"] {
  width: 13px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAABE5AAAROQEb2ZNGAAAAB3RJTUUH1AoPBic2RlqnIAAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAABTUlEQVR42n3QP2sTARyH8c%2F9aVNSOugRFURaoZObm4PvwBcg7Sri1sX3kM28iOwqwbWYycGEYukiwgXkhsA1moYIqXp3ORfFiiHP%2Fvx4vr%2FAv9zCHhI08D2KnFdV%2FJnyixXcxxGOMUGFMV6GHMax%2FVXCCxTtdrtO07QuiqIejUZVp9OZ4SQMPbXhztWkIxT9fr9exWAwmAWC13iIJjzAcbvdrtfR7XbPosizrS0teIRJmqZrpTzPZ3iu2bwZ%2Fv7S9d3dXetIkmQniMNLi0UZEi2QZ1m2XCfN5%2FNpXS2%2F4kcoqs7xrtfrfVsnnZ5%2BeK82xk%2FiOMFjnAyHw4tVe7Is%2BxgKD3ED0Z9DdwOeCIJX3W73LM%2FzWVmW1XQ6nfTf9t%2FgAPvYgOBvwObtWLVXBst7ajvUl0JTy2hM9QkXKP4PbzSaSLZp4VpLaxubV5PgFxDO36GrPHeyAAAAAElFTkSuQmCC") no-repeat center !important;
  border: none !important;
  background-color: inherit !important;
}

input[type="radio"]:focus:not([class]):not([id]):not([style]),
input[type="radio"]:focus,
input[type="radio"]:active:focus,
input[type="radio"][disabled],
input[type="radio"][disabled]:hover {
  border:none !important;
}

input[type="radio"]:checked {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAABE5AAAROQEb2ZNGAAAAB3RJTUUH1QsZFzQH6MHdmQAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAABn0lEQVQoz32Sv4vTYByHnzfJ3Xs0OEitFUQ46S21k04GTkjn224RbxURHO6fELKZqX%2BABDdRBx3PZm%2B45aAEQwqS4aA9zdVC%2FUHy9usgcorFZ%2F%2FA55fib64B20AT0MB322ZmjPMR6k%2Bs4TZwCBwBZ4ABToFXFhw4DjvrBM%2BAKggCyfNcqqqSyWRiwjCcA8eWxSM2uPGnpUOgiuNY1jEajeYK9QbYBRoAd4GjIAhERCTLMvF9X7TW4vu%2BZFkmIiJRFJ3YNo%2B3tmgpYA94nuf5lU6nQ7%2Ffp9fr0e12SdOU8XhMHMfMZrMv7Xb7KY3GC4B9wFRVJSIiWmsZDAbi%2B764ritaaxERqevaKMd6AjQtsL8C06IoVgCe55GmKUmSsFwu8TwPgMViUYpZfQZ%2BgM0d4GUYhvP%2FZRoO378D7gGb4DhN4D5wnCTJ%2Bbr2iqJILawD4Cpg%2F679poKHKPU6iqKT6XQ6r%2BvalGV5Fg%2Fjt8ADYAfYAFAX%2B25edzDbtVrdQrgE8g2LkpV9CuYDcA5U%2Fx5J6wbQdKEFXG7Rcn9luLAE8BNb3%2FD89tWhJgAAAABJRU5ErkJggg%3D%3D") !important;
}


*::-moz-radio {
  border: none !important;
  background-color: transparent !important;
}

/* Checkboxes */

input[type="checkbox"] {
  width: 12px;
  height: 12px;
  border-width: 0 !important;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1AgMECE6aWhvwQAAADlJREFUeNpjZGBgsGRgYFBiIBKwQBXvJlI9GwsS5zUh1f%2F%2F%2F%2F%2FHxEAiGNVAEw2wiGP7%2F%2F%2F%2FP2I0AAAC1gpD9bqgwgAAAABJRU5ErkJggg%3D%3D") no-repeat center !important;
  background-color: -moz-Field !important;
}

input[type="checkbox"]:checked {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1QwMBQERdGGm3QAAAJ1JREFUKM%2BN0TFqQkEUheFv5CVLsLHLBlK7ltekEMRCSFIklumDvWQX1u7Nk2YeTMToDAzM4Z7%2FXu6cgiWedJ6hmk%2Bd%2FkcYMUe5cb9QkmTW0fUHn5O4B%2ByxqlP%2BAA%2F4uDAf8IZg1xZGLGrhtXb7rjp4mXZJkksgODbvTbt8C8yxbYznqsstoOC9mtfXvvcaUPD8Xx5JMkwJJjn3RP0Lq9s0z9fV%2B5QAAAAASUVORK5CYII%3D") !important;
}

/* Dropdowns  */
option {
 background-color:  Window;
}

select > input[type="button"]{
  width: 6px !important;
  border: none !important;
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1wUFFQYajQTGEgAAAEtJREFUKM9jYKAQ%2BJGrkYkINffI1XwPnwFMJNh4j1jN94gRZ8GhSIlaATYINbOQGrfI4cFEYoApEetsJUIGEvKzEj6XEBNgSgy0AACPwgiPN6Lx4gAAAABJRU5ErkJggg%3D%3D") no-repeat center center !important;
}

Finalement le mieux serait peut-être de changer juste les boutons radio :/

Ceci dit ce n'est pas très grave si les style auteur ne s'appliquent pas dans tous les cas. Y a qu'à voir Konqueror !!

anod1

J'ai perdu le code d'origine en faisant un peu n'importe quoi... :rolleyes:

Es-ce que quelqu'un pourrait le poster s'il vous plait...
merci.

Alain.g

voilà

/* ***** 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; }
}

RavN

J'ai utilisé ton deuxième CSS c'est super !

Mais tes codes ont un petit inconvénient, c'est sur la page d'accueil du wiki :

Comment enlever ces boutons ?

Merci 🙂

Alain.g

Houla 😃

Tu ne devrais pas avoir cela, tu as du faire une fausse manip ! (je viens de tester, c'est OK)
Peux-tu donner le contenu du fichier pour que je vois d'où vient l'erreur

RavN

Wé c'était grave le bazard mais c'est bon, je m'étais trompé de fichier. Je garde ce css et je vais me faire un forms.css.bak avec le code vierge que tu as donné pour anod1 ça devrait être bon.

Bah sinon y'a beaucoup de codes et on sait plus lequel prendre, je crois que les bords arrondis arrondis du premier post étaient pas mal aussi. On peut le faire avec un de tes CSS ?

Merci de votre boulot à tous 😉

Osku

Alain.g a écritFirefox Linux est aussi complet que Firefox Windows.
Les développeurs ont sûrement plus de boulot du côté windows concernant la sécurité, mais sinon ce n'est pas une version plus soignée.

Concernant le look des éléments de formulaire, il y a une feuille de style qui est la même dans les deux cas, mais ensuite ce sont les éléments du système qui s'imposent.
C'est pourquoi ils sont identiques dans Firefox Windeows et Internet Explorer.

Bref y a vraiment pas de quoi le boycotter pour ça :/

Concernant Epiphany, on perd quand même ce qui est peut-être le plus gros avantage de Firefox : les extensions et les thèmes.

Pour rebondir sur tes propos Alain,
Dommage que certains éléments systême (Gnome/Gtk) ne s'imposent pas sous Firefox sur Linux.
Certes, on a l'apparence du thème GTK mais pas les boutons radios.
à l'instar d'un Camino ou Safari sur MacOS où tous les éléments s'imposent.
ou encore comme tu l'as dit FFx & IE sous Windows.

A quoi ressemble Firefox sous kde ? (avec le gtk-qt-engine)

belga

A quoi ressemble Firefox sous kde

pffff affreux

belga

Au fait que faut-il faire pour qu'après une mise à jour
on ne perd pas les transformations css

Bismut

Les garder dans un coin et les refaire...

belga

C'est ce que je fais.
Pas d'autres solutions quoi?

Ras'

J'avais aussi le problème pour la barre de menu de navigation de ubuntu-fr mais ça a disparu sans que je ne touche à rien ...
Par contre j'ai un problème, depuis que j'ai mis ce gadget firefox bugg sur certains "champ d'écriture" (me rapelle plus le nom exact, là ou on entre un pseudo et un mdp)

par exemple un pote se loggue sur le site de voila et quand il écrivais dans la case il ne voyait que la moitié supérieure de caractères, enfin c'était pas centré... :/

AuraHxC

J'ai eu le même soucis que toi pour les champs ou l'on voit que la moitié mais je sais plus si j'ai fait quelque chose ou bien si ca c'est résolu tout seul...

pierluc

Est-ce que vous pouvez résumer? Si je veut remplacer les affreux boutons de formulaires ainsi que les petits ronds de formulaires par quelque chose de beau je fais quoi?

AuraHxC

Dans la page deux, on te file un code forms.css, ben tu fais un fichier forms.css, tu colle dedans le contenu que l'on te donne et tu le met dans /usr/lib/firefox/res/ et voila

pmd

Perso, j'ai choisis de ne modifier que les bouton "checkbox" et "radio". Il faut rajouter le code suivant dans /usr/lib/firefox/res/forms.css :

/* AJOUTE PAR MOI */
/* Radio buttons */

input[type="radio"] {
  width: 13px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAABE5AAAROQEb2ZNGAAAAB3RJTUUH1AoPBic2RlqnIAAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAABTUlEQVR42n3QP2sTARyH8c%2F9aVNSOugRFURaoZObm4PvwBcg7Sri1sX3kM28iOwqwbWYycGEYukiwgXkhsA1moYIqXp3ORfFiiHP%2Fvx4vr%2FAv9zCHhI08D2KnFdV%2FJnyixXcxxGOMUGFMV6GHMax%2FVXCCxTtdrtO07QuiqIejUZVp9OZ4SQMPbXhztWkIxT9fr9exWAwmAWC13iIJjzAcbvdrtfR7XbPosizrS0teIRJmqZrpTzPZ3iu2bwZ%2Fv7S9d3dXetIkmQniMNLi0UZEi2QZ1m2XCfN5%2FNpXS2%2F4kcoqs7xrtfrfVsnnZ5%2BeK82xk%2FiOMFjnAyHw4tVe7Is%2BxgKD3ED0Z9DdwOeCIJX3W73LM%2FzWVmW1XQ6nfTf9t%2FgAPvYgOBvwObtWLVXBst7ajvUl0JTy2hM9QkXKP4PbzSaSLZp4VpLaxubV5PgFxDO36GrPHeyAAAAAElFTkSuQmCC") no-repeat center !important;
  border: none !important;
  background-color: inherit !important;
}

input[type="radio"]:focus:not([class]):not([id]):not([style]),
input[type="radio"]:focus,
input[type="radio"]:active:focus,
input[type="radio"][disabled],
input[type="radio"][disabled]:hover {
  border:none !important;
}

input[type="radio"]:checked {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAABE5AAAROQEb2ZNGAAAAB3RJTUUH1QsZFzQH6MHdmQAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAABn0lEQVQoz32Sv4vTYByHnzfJ3Xs0OEitFUQ46S21k04GTkjn224RbxURHO6fELKZqX%2BABDdRBx3PZm%2B45aAEQwqS4aA9zdVC%2FUHy9usgcorFZ%2F%2FA55fib64B20AT0MB322ZmjPMR6k%2Bs4TZwCBwBZ4ABToFXFhw4DjvrBM%2BAKggCyfNcqqqSyWRiwjCcA8eWxSM2uPGnpUOgiuNY1jEajeYK9QbYBRoAd4GjIAhERCTLMvF9X7TW4vu%2BZFkmIiJRFJ3YNo%2B3tmgpYA94nuf5lU6nQ7%2Ffp9fr0e12SdOU8XhMHMfMZrMv7Xb7KY3GC4B9wFRVJSIiWmsZDAbi%2B764ritaaxERqevaKMd6AjQtsL8C06IoVgCe55GmKUmSsFwu8TwPgMViUYpZfQZ%2BgM0d4GUYhvP%2FZRoO378D7gGb4DhN4D5wnCTJ%2Bbr2iqJILawD4Cpg%2F679poKHKPU6iqKT6XQ6r%2BvalGV5Fg%2Fjt8ADYAfYAFAX%2B25edzDbtVrdQrgE8g2LkpV9CuYDcA5U%2Fx5J6wbQdKEFXG7Rcn9luLAE8BNb3%2FD89tWhJgAAAABJRU5ErkJggg%3D%3D") !important;
}


*::-moz-radio {
  border: none !important;
  background-color: transparent !important;
}

/* Checkboxes */

input[type="checkbox"] {
  width: 12px;
  height: 12px;
  border-width: 0 !important;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1AgMECE6aWhvwQAAADlJREFUeNpjZGBgsGRgYFBiIBKwQBXvJlI9GwsS5zUh1f%2F%2F%2F%2F%2FHxEAiGNVAEw2wiGP7%2F%2F%2F%2FP2I0AAAC1gpD9bqgwgAAAABJRU5ErkJggg%3D%3D") no-repeat center !important;
  background-color: -moz-Field !important;
}

input[type="checkbox"]:checked {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1QwMBQERdGGm3QAAAJ1JREFUKM%2BN0TFqQkEUheFv5CVLsLHLBlK7ltekEMRCSFIklumDvWQX1u7Nk2YeTMToDAzM4Z7%2FXu6cgiWedJ6hmk%2Bd%2FkcYMUe5cb9QkmTW0fUHn5O4B%2ByxqlP%2BAA%2F4uDAf8IZg1xZGLGrhtXb7rjp4mXZJkksgODbvTbt8C8yxbYznqsstoOC9mtfXvvcaUPD8Xx5JMkwJJjn3RP0Lq9s0z9fV%2B5QAAAAASUVORK5CYII%3D") !important;
}

nanolight

RavN a écritJ'ai utilisé ton deuxième CSS c'est super !

Mais tes codes ont un petit inconvénient, c'est sur la page d'accueil du wiki :

http://pix.nofrag.com/9c/df/f12757c28e7f582c89722c96c83f.gif

Comment enlever ces boutons ?

Merci 🙂

Alain.g a écritHoula

Tu ne devrais pas avoir cela, tu as du faire une fausse manip ! (je viens de tester, c'est OK)
Peux-tu donner le contenu du fichier pour que je vois d'où vient l'erreur

Bonjour, ca date un peu mais j'ai aussi le meme problème que RavN pour les boutons du wiki ubuntu.
Par contre moi j'ai récupérer le fichier original sur le site de l'auteur : ( http://emps.l-c-n.com/articles/94/ ) : Prettywidgets-Linux.tgz que j'ai simplement décompressé et j'ai pris les fichiers du dossier 1.9 que j'ai directement copié dans res ca marche nikel sauf ca.

Voici mon form.css:

/* ***** 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):
 *   Philippe Wittenbergh (phiw@l-c-n.com)
 *
 * 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 ***** */
 
 
/* ******
 *	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
 *
 *
 ****** */

/** 
  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:empty {
  min-width: 2.5em;
}

*|*::-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: default;
}

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 {
  -moz-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"][disabled] {
  border-color: inherit;
  background-color: inherit;
  -moz-user-focus: ignore !important;
  /* enable user input so that clicking on the control can bring up the
     file dialog. It's still read-only. */
  -moz-user-input: enabled;
  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;*/ /* *** phiw *** */
  color: -moz-FieldText ! important;
  /*border: 2px inset ThreeDFace ! important;*/ /* *** phiw *** */
}

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;*/ /* *** phiw *** */
  /* same as above, but !important */
  /*color: GrayText ! important;*/ /* *** phiw *** */
  /*background-color: ThreeDFace ! important;*/ /* *** phiw *** */
  cursor: inherit;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  /*border-style: groove !important;*/ /* *** phiw *** */
}

input[type="checkbox"]:hover:active,
input[type="radio"]:hover:active {
  /*background-color: ThreeDFace ! important;
  border-style: inset !important;*/ /* *** phiw *** */
}

*|*::-moz-radio {
  width: 4px;
  height: 4px;
  /* background-color: -moz-FieldText ! important;*/ /* *** phiw *** */
  -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; }
}

/* --------------------------------------------------------------------------
 *
 *	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: ButtonText;
}

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

html input,
html input[type="text"],
html input[type="password"],
html textarea {
	background-color: -moz-Field;
	background-image: url("resource://gre/res/fields2a.png");
	background-repeat: repeat-x;
	background-position: 0 0;
	-moz-border-radius: 0;
	padding: 2px 0 2px 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: 2px 3px 2px 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 url("resource://gre/res/radio.png") 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 url("resource://gre/res/radio_checked.png") 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;
}

html input[type="checkbox"],
html input[type="checkbox"]:checked {
	background: transparent url("resource://gre/res/checkbox.png") 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 url("resource://gre/res/Buttons.png") 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 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("resource://gre/res/Buttons2.png") !important;
}

html button,
html input[type="button"],
html button[disabled],
html input[type="button"][disabled] { /* less strict, allows author styling */
	background: #efeded url("resource://gre/res/Buttons.png") 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;
}
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("resource://gre/res/Buttons2.png");
}
button[disabled]:active,
input[type="button"][disabled]:active {
  padding: 1px 4px;
  border: 2px solid;
	}

/* kill dotted border on input[submit],etc -- leave it in for Linux, otherwise no feedback */
html button::-moz-focus-inner,
html input[type="reset"]::-moz-focus-inner,
html input[type="button"]::-moz-focus-inner,
html input[type="submit"]::-moz-focus-inner,
html input[type="file"] > input[type="button"]::-moz-focus-inner {
	/*border-width:0 !important*/
}

/* --- 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/grad.png") 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-image: url("resource://gre/res/droparrow.png") !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 button:focus,
button:focus:active,
html select:focus,
html input[type="reset"]:focus,
html input[type="button"]:focus,
html input[type="submit"]:focus,
html input[type="checkbox"]:focus,
html input[type="image"]:focus,
html input[type="text"]:focus,
html input:not([type]):focus,
html input[type="password"]:focus,
html textarea:focus {
	outline-style: solid !important;
	outline-width: 2px !important;
	outline-color: -moz-mac-focusring !important;
	outline-offset:0;
	-moz-outline-radius:1px !important;
}*/


html input[type="reset"]:focus,
html input[type="submit"]:focus {
	color:#262626 !important;
	}
/*html select:focus {
	outline-offset:-1px;
	}
html input[type="radio"]:focus {
   outline: 1.4pt solid -moz-mac-focusring !important;
   outline-offset:-1px;
   -moz-outline-radius:100% !important;
   }*/

/*
*::-moz-focus-inner {
	border-color: transparent !important;
	border-width:0 !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;
}

RavN tu as l'air d'avoir trouvé comment régler le problème peut-tu m'expliquer?

PS: Par ailleurs question subsidiaire, comment faire la meme chose avec la liste de mail dans Thunderbird? je crois que c'est le widget input-box mais je ne sais pas du tout quoi modifier...

Merci de votre aide

RavN

Oula ça fait un moment ben oui j'avais ce problème et on m'avait donné un nouveau code qui fonctionnait. Mais au bout d'un moment je me suis rendu compte que y'avait d'autres problèmes d'affichage sur d'autres sites et donc j'ai tout enlevé.

Désolé !

nanolight

Ok merci, bon ba je vais rester comme ca et je verrai si ca va pas sur beaucoup de sites...
D'ailleurs c'est étonnant que les boutons des liens du wiki soient différents de ceux du forum ou du planet...

« Page précédente Page suivante »