Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#51 Le 04/06/2007, à 09:54

Bismut

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

Les garder dans un coin et les refaire...


Mac Mini 2009 avec Archlinux
Asus EeePC S101 avec Archlinux
HTC Magic avec Android

Hors ligne

#52 Le 04/06/2007, à 09:58

belga

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

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


Multi-bomb : Multi-doze : Mandoze, Ubundoze, Pardoze.

900s entre deux postes: mododoze

Hors ligne

#53 Le 07/06/2007, à 21:40

Ras'

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

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é... hmm


Va t'faire shampouiner par le compteur_V2 en timezone[Canada/Eastern] !
 
Les types awesome n'ont rien à prouver. À personne.
'k bye là

Hors ligne

#54 Le 07/06/2007, à 22:17

AuraHxC

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

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

Hors ligne

#55 Le 07/06/2007, à 22:59

pierluc

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

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?


Porte-Folio: http://pearluc.wordpress.com
Linux, là où la main de l'homme n'a jamait mit pied.
Capitaine Patnaud, Émission Dans une galaxie près de chez vous
Pour rire: www.tetesaclaques.tv

Hors ligne

#56 Le 08/06/2007, à 00:49

AuraHxC

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

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

Hors ligne

#57 Le 08/06/2007, à 11:06

pmd

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

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

Hors ligne

#58 Le 18/07/2007, à 23:04

nanolight

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

RavN a écrit :

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 :

http://pix.nofrag.com/9c/df/f12757c28e7 … 96c83f.gif

Comment enlever ces boutons ?

Merci smile

Alain.g a écrit :

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

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

Hors ligne

#59 Le 19/07/2007, à 13:27

RavN

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

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é !

Hors ligne

#60 Le 19/07/2007, à 20:46

nanolight

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

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

Hors ligne

#61 Le 01/08/2007, à 15:05

lemerou

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

Pour info, le bug "Sous linux, Firefox n'utilise pas les composants graphiques du theme courant" est corrigé smile

https://bugs.launchpad.net/ubuntu/+sour … +bug/63242
https://bugzilla.mozilla.org/show_bug.cgi?id=329846

Maintenant peut être que le patch sera appliqué sur la version qui sortira avec Gutsy

Dernière modification par lemerou (Le 01/08/2007, à 15:06)


RAZIA: LA rAdio ÉtudiAnte de LAVAL (53) : http://www.radiorazia.com

Hors ligne

#62 Le 01/08/2007, à 15:15

Compte anonymisé

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

lemerou a écrit :

Pour info, le bug "Sous linux, Firefox n'utilise pas les composants graphiques du theme courant" est corrigé smile

https://bugs.launchpad.net/ubuntu/+sour … +bug/63242
https://bugzilla.mozilla.org/show_bug.cgi?id=329846

Maintenant peut être que le patch sera appliqué sur la version qui sortira avec Gutsy

Ca c'est une bonne nouvelle ! smile

SDinon, il y a ça : http://ubuntuforums.org/showthread.php?t=369596

Dernière modification par Compte anonymisé (Le 01/08/2007, à 15:20)

#63 Le 02/08/2007, à 19:04

Alain.g

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

shamanphenix a écrit :

SDinon, il y a ça : http://ubuntuforums.org/showthread.php?t=369596

En fait c'est la même chose que ce qui est donné au début de sujet (avec les mêmes défauts), c'est juste la méthode d'installation qui change


Xubuntu Karmic !

Hors ligne

#64 Le 03/08/2007, à 08:04

Alain.g

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

lemerou a écrit :

Pour info, le bug "Sous linux, Firefox n'utilise pas les composants graphiques du theme courant" est corrigé smile

je viens d'essayer avec Firefox 3 alpha et effectivement, c'est corrigé.

Avec le thème par défaut d'Ubuntu :

google

googleww3.png

google actu :

googleajm4.png

Dernière modification par Alain.g (Le 03/08/2007, à 08:06)


Xubuntu Karmic !

Hors ligne

#65 Le 03/08/2007, à 08:49

Bismut

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

Putain, génial ! Merci la MoFo ! Depuis le temps qu'on attendait ça ! big_smile
Je leur pardonnerais presque le fait de ne pas utiliser XULRunner comme moteur pour Firefox...


Mac Mini 2009 avec Archlinux
Asus EeePC S101 avec Archlinux
HTC Magic avec Android

Hors ligne

#66 Le 03/08/2007, à 11:56

Compte anonymisé

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

Alain.g a écrit :
shamanphenix a écrit :

SDinon, il y a ça : http://ubuntuforums.org/showthread.php?t=369596

En fait c'est la même chose que ce qui est donné au début de sujet (avec les mêmes défauts), c'est juste la méthode d'installation qui change

Oui, mais c'est plus sexy.

#67 Le 03/08/2007, à 12:37

®om

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

C'est abusé de mettre un truc aussi laid par défaut sous Firefox...

Hors ligne

#68 Le 26/10/2007, à 20:38

dekans

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

regardez, il y a mieux !

http://www.kde-look.org/content/show.php/Firefox+Form+Widgets?content=64392

Avec les instructions d'installations en bas de la description.
C'est sur kde-look mais c'est indépendant de KDE, le style en est juste inspiré.


dekans@jabber.kubuntu-fr.org

Hors ligne

#69 Le 20/11/2007, à 12:56

Levi59

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

personne pour répondre a l'edit 2?

J'ai essayé de trouver mais je trouve pas d'option claire... sad

Hors ligne

#70 Le 20/11/2007, à 14:10

Omnisilver

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

Pour info, Firefox 3 sera mieux intégré sous linux : utilisation du thème GTK, boutons plus jolis, etc.

Edit : ah bah ça a déjà  été dit tongue

Dernière modification par Omnisilver (Le 20/11/2007, à 14:12)

Hors ligne

#71 Le 20/11/2007, à 15:26

atlas95

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

Bonjour quelles sont les bonnes commande a excecuter pour que ca marche avec firefox 2.0.0.9 ?
Car j'ai essayer plusieurs tuto en restaurant le backup a chaque fois après et aucune ne fonctionne.
Merci d'avance


Ubuntu sur un XPS m1330:c'est ici !
Mon blog sur ubuntu:c'est ici !
Jabber : cyril at jabber.levis-heb.net

Hors ligne

#72 Le 20/11/2007, à 16:30

Levi59

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

Oui mais pour l'instant il y a pas de FF3 donc tant qu'on peux améliorer nous meme, autant le faire!


Atlas95:

J'ai modifiez mon form.css comme ca: (tu peux remplacer l'ensemble du tien avec celui la! ^^)

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

/* 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"]:disabled {
  border: none !important;
  background-color: transparent !important;
}

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

Je cree un fichier sur le bureau que je nomme form.css et j'update celui de firefox avec cette commande (j'ai au préalable faire un backup du fichier):

cp -u /home/LOGINSESSION/Bureau/form.css /usr/lib/firefox/res/forms.css

Voici un effet de la modification...

avant sanstitretd4.jpg
après capture1hy3.jpg

Dernière modification par Levi59 (Le 20/11/2007, à 16:55)

Hors ligne

#73 Le 20/11/2007, à 16:57

Levi59

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

Les cases initiative apparaitraient de la même façon sans modif...

Hors ligne

#74 Le 28/04/2008, à 10:27

damb

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

Existe t il une astuce identique pour ff3...?

Hors ligne

#75 Le 28/04/2008, à 11:09

Bismut

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

Astuce obsolète car FF 3 gère beaucoup mieux son intégration GTK donc le thème est repris pour les éléments de pages web.

Mais si tu veux tout de même skinner toi-même tes éléments, ben ça doit toujours être possible, ce n'est que du CSS smile


Mac Mini 2009 avec Archlinux
Asus EeePC S101 avec Archlinux
HTC Magic avec Android

Hors ligne