[css3][firefox] input + -moz-border-radius

Version imprimable

Bonjour

J'essaie les -moz-border-radius / border-radius . Comme je teste sur firefox, j'ai donc les -moz-border-radius . Je trouve bien dommage que ff n'utilise pas border-radius :(

Je suis arrivé à faire de joli cadre sur certains éléments :
Code:

1 2 3 4 5 6 .tete ul li { display:inline;border: 1px ridge #000;font-size : 12px; padding:8px;line-height:26px;margin-left:2px;margin-right:2px; -moz-border-radius : 20px 10px; border-radius : 20px; }
J'essaie de faire le même effet sur un input de type select : il est imperméable à mes essais !

07/06/2010, 08h40
Bisûnûrs

Il y a certains éléments de formulaire qui sont très difficilement customisables. Les select en font partie.
07/06/2010, 09h18
troumad

Et on trouve où ses éléments modifiables ou les non modifiables ?

C'est donc pour ça que je ne trouvais pas d'exemple simple pour ces boutons :(
07/06/2010, 09h35
Bisûnûrs

On trouve ça nulle part, on teste et on remarque juste que ça marche pas. :mrgreen:
Mieux, on découvre aussi que sur certains navigateurs des choses fonctionnent mais pas toutes, et sur d'autres c'est l'inverse.
07/06/2010, 10h13
troumad

Donc, pour le moment, rien n'est encore clair sur le sujet !
Il n'y a pas de norme...
07/06/2010, 10h54
devyan

Bonjour,

Pour ton cas, tu peux quand même y arriver mais il faut "tricher" en enveloppant les INPUT.

1/ tu enlève les bordures du INPUT (ça c'est possible ;))
2/ tu mets un DIV autour du INPUT
3/ tu appliques la bordure arrondie au DIV

devyan
07/06/2010, 10h59
Bisûnûrs

Citation:

Envoyé par devyan

1/ tu enlève les bordures du INPUT (ça c'est possible ;))

Ce n'est malheureusement pas possible sur IE (en parlant des select qui sont le problème initial) ...
07/06/2010, 11h39
devyan

Citation:

Envoyé par Bisûnûrs

Ce n'est malheureusement pas possible sur IE (en parlant des select qui sont le problème initial) ...

Oui tout à fait ! (dsl je croyais qu'on parlait de INPUT)
Pour le SELECT c'est un peu plus ardu mais faisable et cela nécessite un peu de JavaScript en plus du CSS

devyan
07/06/2010, 19h10
troumad

Je viens de tester un point particulier avec firefox : les vieilles versions (3.0.2) ne prennent pas en compte toute les border-radius pris en compte par les nouvelles (3.6). Donc peut-être qu'il suffit d'attendre pour que ça arrive aussi au input !
07/06/2010, 23h06
thelvin

Bah, un jour ou l'autre, et si ça reste spécifié pour que, oui.

De manière générale, styliser les contrôles des formulaires est encore assez expérimental, et les spécifications ne sont pas garanties de rester inchangées avant version stabilisée (raison pour laquelle il ne faut pas encore proposer border-radius: ce que ça va faire peut ne pas être ce qu'on croit maintenant que ça va faire).

Bonjour

Je reviens sur le sujet...
Firefox 4 fait de gros progrès !
J'avais mis sur un site des css du style :
Code:

1 2 3 4 5 6 .tete ul li { display:inline;border: 1px ridge #000;font-size : 12px; padding:8px;line-height:26px;margin-left:2px;margin-right:2px; -moz-border-radius : 20px 10px; border-radius : 20px; }
Je viens de voir que ff4 bêta 7 applique les border-radius, mais plus les -moz-border-radius.

Les border-radius sont pris en compte pour les input :
Code:

1 2 3 4 5 .rond, input { -moz-border-radius : 20px; border-radius : 20px; }
Ça m'a surpris de voir le changement de look ce matin !

Et sous Internet explorer, je crois que tous mes coins sont carrés ! Sans décoration.

24/11/2010, 15h29
adiGuba
Salut,

Quelques remarques :

Citation:

Envoyé par troumad

Comme je teste sur firefox, j'ai donc les -moz-border-radius . Je trouve bien dommage que ff n'utilise pas border-radius :(

Les propriétés préfixés par -moz- sont des extensions propriétaire des CSS spécifique à Firefox (plus précisément à son moteur de rendu Gecko également utilisé par quelques autres navigateurs).

Ce préfixe est important car il indique qu'on utilise une propriété non-standard. En effet la propriété a été implémentée alors même qu'elle n'avait pas été standardisée par le W3c.

C'est très courant dans le monde des navigateurs, et chaque navigateur/moteur utilise son propre prefixe ( -webkit- pour Webkit/Chrome/Safari, -o- pour Opera, -ms- pour Microsoft/IE).

Ceci principalement pour deux raisons :
- Soit pour implémenter une propriété inexistante dans les standards, pour un besoin spécifique au navigateur.
- Soit pour implémenter une propriété non-finalisé, à partir des documents de travail du W3c.
  C'est très important d'utiliser un préfixe dans ce cas là, afin de ne pas utiliser le vrai nom sur une mauvaise implémentation au cas où les spécifications évolueraient...
C'est pour cette seconde raison que Mozilla utilise -moz-border-radius, et ce depuis la sortie de Firefox 1.0 (ce qui nous fait quand même remonter à novembre 2004). D'ailleurs les autres navigateurs font pareil, comme Webkit avec -webkit-border-radius.

Cette approche consistant à implémenter les propriétés en même temps que le W3c travaille sur la norme permet beaucoup de chose, comme des démos techniques qui peuvent amener à mieux définir les besoins...

Bref au lieu de faire les normes puis de les implémenter après, les deux travaillent en même temps, ce qui permet de faire remonter les problèmes plus facilement et d'améliorer les specs...

Citation:

Envoyé par troumad

Je viens de tester un point particulier avec firefox : les vieilles versions (3.0.2) ne prennent pas en compte toute les border-radius pris en compte par les nouvelles (3.6).

Normal : les spécifications ont évoluées, et donc son implémentation aussi...

C'est d'ailleurs à cause de ces changements de spécifications que -webkit-border-radius et -moz-border-radius ont une comportement différent sur certaines syntaxes.

:arrow: Ces changements ne devront plus avoir lieu avec border-radius !

Citation:

Envoyé par troumad

Je viens de voir que ff4 bêta 7 applique les border-radius, mais plus les -moz-border-radius.

En fait FF4 supporte les deux.

En décembre 2009, le W3c a passé le document "Backgrounds and Borders CSS3" en "Candidate Recommendation", ce qui fait que les navigateurs ont commencé à implémenter/intégrer ses propriétés (dont border-radius) sous leurs noms standards.

Donc dans Firefox 4, border-radius est désormais parfaitement reconnu, mais -moz-border-radius a été conserver pour des raisons de compatibilité, et correspond simplement à un alias.

Bien sûr si tu utilises les deux, seul le dernier fera effet ;)

Citation:

Envoyé par troumad

Et sous Internet explorer, je crois que tous mes coins sont carrés ! Sans décoration.

border-radius n'est implémenté qu'à partir d'IE9 beta...

Pour info Mozilla dispose d'un wiki assez complet décrivant les propriétés CSS de Firefox standard ou propriétaire :
- CSS reference
- [https://developer.mozilla.org/en/CSS...nsions]Mozilla CSS extensions[/url]
C'est très pratique même pour les autres navigateurs, car les propriété sont généralement assez bien détaillés, avec des exemples et surtout bien souvent un tableau de compatibilité des différents navigateurs !!! Très pratique !

Exemple pour border-radius : https://developer.mozilla.org/en/css/border-radius

a++