28172 sujets

CSS et mise en forme, CSS3

Problème border-radius avec border-width suppérieur à 1px sous Chrome

Bonjour à tous,

Je fais face à une problème très particulier et ayant cherché pendant plusieurs heures sur internet sans succès, je me permets d'envoyer ce post.

Voici mon problème: je désire appliquer un border-radius:6px et une border-width:2px sur un champs select, mais le problème est que ça fonctionne partout (IE 9, FireFox 11, Opera 11), sauf sous Chrome.
Voici le résultat que j'obtiens:
http://img194.imageshack.us/img194/3631/problemcssradius.png
Voici le css complet:

color: black;
background: white;
border-width: 2px;
border-color: #DDD;
border-radius: 6px;
border-style: solid;


Si j'utilise la propriété : -webkit-appearance: none; cela permet de supprimer la bordure rectangulaire mais cela supprime aussi la flèche à droite à l'intérieur du select.

Avez vous une éventuelle solution à ce problème?

Merci d'avance pour vos réponses,

Jon
Autre précision, avec : border-width:1px; au lieu de : border-width:2px; cela fonctionne, mais je voudrais pouvoir utiliser une bordure de 2px au select...
Modérateur
Bonjour:
1) Laisser l'input plus simple, et attendre de meilleures implémentations,
2) Bricoler un fake input en js. (Le js cache l'input, et change sa valeur simultanément)
kustolovic a écrit :
Bonjour:
1) Laisser l'input plus simple, et attendre de meilleures implémentations,
2) Bricoler un fake input en js. (Le js cache l'input, et change sa valeur simultanément)


Merci pour la réponse.
Mais est ce que c'est un bug lié au moteur de rendu webkit?
Si c'est le cas, peut être pourrais-je utiliser ceci:
-webkit-appearance: none;
et ajouter un background-image pour faire afficher une flèche (vers le bas)

Ça éviterai de charger un js (si vraiment il n'y a pas d'autres solutions)...
Salut,
starmate a écrit :
Mais est ce que c'est un bug lié au moteur de rendu webkit?

Oui et non…
En fait même si quelques techniques commencent à pointer le bout de leur nez – avec une intéropérabilité limitée –, la mise en forme des éléments de formulaires reste très aléatoire. Il n'y a pas si longtemps, elle était même fortement déconseillée, un peu pour les mêmes raisons que pour la mise en forme de la barre de défilement du navigateur (élément système = pas touche). Pour les formulaires, il y a aussi le même problème avec le «bouton parcourir» aka input[type=file].

Perso, je te conseille de ne pas y perdre trop de temps, ou alors de plutôt passer par l'option Javascript évoquée par kustolovic qui peut donner de bien meilleurs résultats.
audrasjb a écrit :

Perso, je te conseille de ne pas y perdre trop de temps, ou alors de plutôt passer par l'option Javascript évoquée par kustolovic qui peut donner de bien meilleurs résultats.


En fait, je n'ai pas la possibilité d'ajouter des librairies js (je n'ai accès qu'aux feuilles de styles).
Je te rejoins sur ce que tu dis concernant les barres de défilements mais concernant les formulaires, le CSS3 ne devrait pas poser de problèmes. Je pense pouvoir dire sans trop me tromper que les éléments de formulaires sont gérés par les navigateurs et non par le système d'exploitation et de ce fait, devraient pouvoir être habillé par une feuille de style sans problèmes.

En attendant d'avoir plus de temps à consacrer pour la recherche d'une solution, j'ai mis le problème de coté, mais c'est certain que si je ne trouve pas une solution acceptable, j'abandonnerai.

Je ne suis pas anti utilisation de js (j'adore jQuery d'ailleurs), mais je me dit; vu que tous les navigateur commencent à bien prendre en charge le CSS3, c'est dommage de ne pas utiliser les possibilités qui sont offertes.

Merci encore pour les réponses
Gothor a écrit :
Sinon, on ne peut pas juste mettre ce fameux select dans un élément auquel on appliquera les coins arrondis ?
http://jsfiddle.net/erWn5/


Merci pour cette solution. Malheureusement, je ne peux pas accéder au code html et du coup je ne peux pas ajouter ce type d'élément.

Par contre, j'ai trouvé une astuce. J'ai remarqué que lorsqu'on enlève une des bordure, tout fonctionnait à nouveau sous webkit:

select {
    border-radius : 6px;
    border-width :2px;
    border-color : #ddd;
    border-style : solid;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
    select { 
        border-style : solid none solid solid; 
    }
}


En attente d'une meilleure solution, c'est ce que je vais utiliser...
Sujet clos
Aller à