web-dev-qa-db-fra.com

Coins arrondis pour <input type = 'text' /> utilisant border-radius.htc pour IE

Je veux créer un champs de saisie avec des coins arrondis.

HTML:

<div id="RightColumn">
<input type="text" class="inputForm" />
</div>

CSS:

.inputForm
{
    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    -khtml-border-radius: 10px; /* KHTML */
    border-radius: 10px; /* CSS3 */
    behavior:url("border-radius.htc");
}

#RightColumn
{
    background-color:White;
}

Mais IE n'affiche aucune bordure pour les champs de saisie - ni arrondi ni simple bordure. Lorsque je supprime le style CSS pour #RightColumn, IE montre une entrée champs avec des coins arrondis. Mais j'ai besoin de fond pour #RightColumn.

Comment puis-je le créer?

cssinternet-explorerinternet-explorer-8rounded-cornerscss3
27
Sir Hally

Oh seigneur, ne fais pas ça. Les fichiers HTC ne sont jamais une bonne idée pour des raisons de performances et de clarté, et vous utilisez trop de paramètres spécifiques au fournisseur pour quelque chose qui peut facilement être fait sur plusieurs navigateurs depuis IE6.

Appliquez une image d'arrière-plan à votre champ de saisie avec les coins arrondis et rendez la couleur d'arrière-plan du champ transparente avec une bordure: aucune n'est appliquée à la place.

38
hollsk
    border-bottom-color: #b3b3b3;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #b3b3b3;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #b3b3b3;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #b3b3b3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;

... Peu importe IE6, nous sommes en 2011 mise à niveau et réveillez-vous s'il vous plaît!

16
pancho

si vous utilisez pour certains champs de texte, utilisez la classe

<style>
  .inputForm{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
   }
</style>

et dans l'utilisation du code html

 <input type="text" class="inputForm">

ou si vous voulez le faire pour tout le champ de texte de type d'entrée signifie utiliser

<style>
    input[type="text"]{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
    }
 </style>

et en code html

<input type="text" name="name">
4
Raja Manickam

Cela ne fonctionnera pas dans IE <9, cependant, vous pouvez faire en sorte que les IE prennent en charge cela en utilisant:

CSS3Pie

PIE rend Internet Explorer 6-8 capable de rendre plusieurs des fonctionnalités de décoration CSS3 les plus utiles.

3
Sarfraz

Le document du W3C indique la propriété "border-radius" : "pris en charge dans IE9 +, Firefox, Chrome, Safari et Opera".

Par conséquent, je suppose que vous testez sur IE8 ou inférieur.

Pour les "éléments réguliers", il existe une solution compatible avec IE8 et d'autres navigateurs anciens/pauvres. Voir ci-dessous.

HTML:

<div class="myWickedClass">
  <span class="myCoolItem">Some text</span> <span class="myCoolItem">Some text</span> <span class="myCoolItem"> Some text</span> <span class="myCoolItem">Some text</span>
</div>

CSS:

.myWickedClass{
  padding: 0 5px 0 0;
  background: #F7D358 url(../img/roundedCorner_right.png) top right no-repeat scroll;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 11px Verdana, Helvetica, sans-serif;
  color: #A4A4A4;
}
.myWickedClass > .myCoolItem:first-child {
  padding-left: 6px;
  background: #F7D358 url(../img/roundedCorner_left.png) 0px 0px no-repeat scroll;
}
.myWickedClass > .myCoolItem {
  padding-right: 5px;
}

Vous devez créer à la fois roundCorner_right.png & roundCorner_left.png . Ce sont des solutions pour IE8 (et ci-dessous) pour simuler la fonction des coins arrondis.

Donc, dans cet exemple ci-dessus, nous appliquons le coin arrondi gauche au premier élément de travée dans le div contenant, et nous appliquons le coin arrondi droit au div contenant. Ces images chevauchent les "coins carrés" fournis par le navigateur et donnent l'illusion de faire partie d'un élément arrondi.

L'idée des entrées serait de faire la même logique. Cependant, l'entrée est un élément vide, "l'élément est vide, il ne contient que des attributs", dans un autre Word, vous ne pouvez pas encapsuler une plage dans une entrée telle comme <input><span class="myCoolItem"></span></input> pour ensuite utiliser des images d'arrière-plan comme dans l'exemple précédent.

Par conséquent, la solution semble être de faire le contraire: envelopper l'entrée dans un autre élément. voir cette réponse coins arrondis des éléments d'entrée dans IE

2
Adrien Be

Écrire à partir du téléphone, mais curvycorners est vraiment bon, car il ajoute ses propres bordures uniquement si le navigateur ne le prend pas en charge par défaut. En d'autres termes, les navigateurs qui prennent déjà en charge certains CSS3 utiliseront leur propre système pour fournir des coins.
https://code.google.com/p/curvycorners/

1
jolt