Ubuntu-fr

Compte anonymisé

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

Epiphany ne fonctionnera pas si tu désinstalles Firefox, il utilise le moteur de Firefox.

Installes plutot iceweasel, va.

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

Jean-lux

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

Epiphany ne fonctionnera pas si tu désinstalles Firefox, il utilise le moteur de Firefox.

Installes plutot iceweasel, va.

Quoi, Epiphany utilise le moteur de Firefox, t'est sur que tu ne te trompe pas ? Il utilise pas le moteur de rendu Gecko que Firefox utilise également ?

---

Un jour... Le manchot cassera la fenêtre !

Remboursez votre forfait non utilisé sur http://goo.gl/uQyCq NOFAKE.

Compte anonymisé

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

Heu, à vérifier, mais je pense que c'est ça.
Je peux me tromper mais j'en étais persuadé.

misaine

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

epiphany , galeon , firefox , ou iceweasel utilise le même moteur mais fonctionnent indépendament

---

la roue tourne...c'est sûr! c'est même pour ça qu'on l'a inventée.

Compte anonymisé

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

OK, autant pour moi alors.
Mais si tu veux les mêmes fonctionnalités que Firefox en plus "libre", je maintiens : installes Iceweasel.

belga

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

J'ai regardé iceweasel: c'est firefox sans le nom.
Quel intérêt alors??????????

---

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

900s entre deux postes: mododoze

Alain.g

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

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

---

Xubuntu Karmic !

belga

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

Je pense qu'il faut deux écrans et comparer
avec des installes fraiches.
Alors on peut voir la différence.

D'ailleurs le titre de la discussion indique
ce problème.

En tout cas pour moi si des développeurs du libre
veulent plus s'amuser sur Win, respect
mais je vois que dans le libre des tonnes de discussion s'ouvrent
pour des problèmes rencontrés avec ce navigateur.
C'est dommage pour ces utilisateurs qui font un travail de fou
pour vulgariser l'utilisation du libre.

Enfin de mon coté je migre vers d'autres navigateurs.

---

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

900s entre deux postes: mododoze

Jean-lux

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

Fonctionne impec pour moi

merci

---

Un jour... Le manchot cassera la fenêtre !

Remboursez votre forfait non utilisé sur http://goo.gl/uQyCq NOFAKE.

Compte anonymisé

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

J'ai regardé iceweasel: c'est firefox sans le nom.
Quel intérêt alors??????????

Il n'a pas Google comme moteur de recherche par défaut, et sera développé dans un esprit plus conforme à la philosophie libre que Firefox.

belga

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

merci pour l'info
mais google on peut le retirer.

Ce que je veux dire c'est que ce n'est que des changements cosmétiques
puisque le fonctionnement et les extensions sont les mêmes et tu dois les télécharger
du site mozilla-firefox alors que tu utilises iceweasel.

Je trouve que ce n'est pas très clair.

---

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

900s entre deux postes: mododoze

Compte anonymisé

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

Oui, ce n'est presque que "cosmétique", mais le point de départ du fork n'est justement que "cosmétique".

belga

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

Espérons alors

---

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

900s entre deux postes: mododoze

Alain.g

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

Bon finalement voici le code que j'utilise pour le moment :

/* Text inputs */

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

/* Buttons */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
select{
  color: ButtonText;
  background:  transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH1wUFFgUhFWTCrAAAAD1JREFUCNeFjSkSgDAAxLLh%2F78tl%2BlWIJkBEZGYcB1D4JO2Qm0RKn23x%2FE%2BdyEmSGKIJALqpiqJ7bSzf%2B8F4YMeFGU1cZgAAAAASUVORK5CYII%3D") repeat-x center;
  border: 1px outset ThreeDShadow;
  margin: 1px;
  -moz-background-clip: padding;
}


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

select,
select:not([size]),
select[size="0"],
select[size="1"] {
  color: ButtonText;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH1wUFFgUhFWTCrAAAAD1JREFUCNeFjSkSgDAAxLLh%2F78tl%2BlWIJkBEZGYcB1D4JO2Qm0RKn23x%2FE%2BdyEmSGKIJALqpiqJ7bSzf%2B8F4YMeFGU1cZgAAAAASUVORK5CYII%3D") repeat-x center;
  border: 1px outset ThreeDShadow;
  -moz-background-clip: padding;
}

option {
 background-color:  #F4F1EF;
}

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

Ceux qui veulent tester peuvent ajouter ce code à la fin de fichier /usr/lib/firefox/res/forms.css (le fichier original, pas celui qui aurait déjà été modifié).
Il est inutile de télécharger des images, elles sont générées par la longue ligne un peu bizarre : "data:image/png;base64,iVBOR...."

En gros, parmi ce qui semblait poser problème, j'ai supprimé :
– les -moz-colors (si une couleur de bordure était définie dans la css d'un site elle n'était pas prise en compte)
- beaucoup des !important qui empêchaient une partie des "css auteur" d'être effective
- les padding. J'ai également réduit les marges à 1px, mais à mon avis il vaudrait mieux les supprimer aussi car normalement ces éléments n'ont pas de marges par défaut
-les bordures solides : j'ai remis les inset et ouset pour garder les effets d'incrustation et d'extrusion. En revanche j'ai réduit l'épaisseur.
- après avoir mis pas mal de "border-radius" pour arrondir les coins, j'ai fini par tout enlevé car j'ai l'impression que Firefox ne les gère pas toujours d'une manière très heureuse.

Sinon j'ai ajouté une image de fond à deux couleurs comme sur le boutons du thème par défaut d'Ubuntu :
ça fait mieux mais là aussi un peu risqué: ça peut surclasser une couleur de fond définie dans la css auteur, cela dépend de la façon dont c'est déclaré.

google :   

Dernière modification par Alain.g (Le 06/05/2007, à 19:35)

---

Xubuntu Karmic !

nozof

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

Pour personnaliser firefox :
http://www.geckozone.org/forum/viewtopi … sc&start=0

Sylphe

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

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

Alain.g

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

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

Dernière modification par Alain.g (Le 06/05/2007, à 20:38)

---

Xubuntu Karmic !

anod1

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

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

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

Alain.g

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

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

---

Xubuntu Karmic !

RavN

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

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

Dernière modification par RavN (Le 09/05/2007, à 16:36)

---

Profil WRI

Alain.g

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

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

---

Xubuntu Karmic !

RavN

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

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

---

Profil WRI

Osku

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

Firefox 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)

---

Fasten your seat belt while seated
Carac ordi / Bug n°1 /
Du libre et du sport

belga

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

A quoi ressemble Firefox sous kde

pffff affreux

---

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

900s entre deux postes: mododoze

belga

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

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

---

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

900s entre deux postes: mododoze