web-dev-qa-db-fra.com

Coins arrondis sur un champ

J'ai remarqué que la balise "fieldset" rend une bordure de coin arrondie sur IE (elle s'affiche au carré sur les autres navigateurs).

<fieldset>
         <legend>My legend</legend>
</fieldset>

MAIS si je mets un style CSS sur le fieldset, les coins arrondis disparaissent !!

Quelqu'un sait pourquoi? Comment garder les coins arrondis mais avec une autre couleur de bordure?

[EDIT]: désolé pour la confusion, je ne demande pas comment avoir des coins arrondis sur Firefox/autres navigateurs, je veux savoir comment garder les coins arrondis sur IE et avoir une autre couleur de bordure ( border-color: rouge; sur le terrain, les arrondis sont transformés en carrés ...).

htmlcssinternet-explorerrounded-cornersfieldset
24
Olivier Payen

Certains éléments (boutons, zones de saisie) utilisent les styles visuels du système par défaut - et dans les thèmes Windows XP/Vista par défaut, les ensembles de champs ont des coins arrondis. (Jetez un œil aux propriétés d'affichage, par exemple.)

Si vous attribuez un style à un <input />, par exemple, il perdra également ses effets de survol, ses dégradés et d'autres choses.

7
grawity

Ce site a un correctif pour les problèmes concernant les coins arrondis fieldset et IE10. Il y a encore des problèmes dans IE (visage triste). Vous devez le faire flotter pour travailler 100% du temps.

fieldset {
  margin: 20px;
  padding: 0 10px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px #666;
  padding-top: 10px;
}
legend {
  padding: 2px 4px;
  background: #fff;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}
<fieldset>
  <legend>Legend</legend>
</fieldset>

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

15
Tim

Il n'y a pas POURQUOI en tant que tel, ce n'est un secret pour personne que les navigateurs se comportent différemment.

Avez-vous exploré l'attribut - - moz-border-radius ?

Je pense que quelque chose comme

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}

fonctionne dans FireFox/Mozilla, mais cela fait longtemps que je n'ai pas essayé: D

13
inspite

Les bordures de IE ne sont arrondies que lorsque 1) Vous avez activé l'option "Utiliser les styles visuels sur les fenêtres sur les boutons" sous Performance | Onglet Effets visuels. Pour le dire franchement: si vous avez activé le thème XP, il sera arrondi, lorsque vous aurez le look Win2000 classique, il ne sera pas arrondi.

La deuxième exigence 2) est "pas de CSS lié à la frontière" pour l'ensemble de champs. Chaque fois que vous affectez une couleur de bordure, ou un style de bordure, ou une largeur de bordure, la "rondeur" disparaît, il n'y a pas de solution pour cela. Il en va de même pour la saisie (boutons et champs), la zone de texte et les balises de sélection. Chaque fois que IE ne trouve aucun thème CSS pour le contrôle à rendre, il appliquera le "thème Windows par défaut" au contrôle.

8
ELDopa

http://www.webteacher.ws/2010/02/27/style-a-fieldset-with-rounded-corners-using-css/

0
flig

Vous pouvez utiliser la propriété CSS-3 border-radius, qui fonctionnera sur Firefox et Safari:

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
0
Absolut40