CSS: arrondi champs de saisie de texte

comment puis-je faire des arrondis champs de saisie de texte avec le css ?

grâce

Bien que plusieurs de la réponse ci-après la réponse à l'aide de CSS3 est probablement la plus forte de la solution dans le web d'aujourd'hui des normes. La plupart des navigateurs prennent en charge CSS3 aujourd'hui.

OriginalL'auteur aneuryzm | 2010-07-07

  1. 0

    Les deux réponses sont correctes, vous pouvez soit utiliser CSS3 styles (qui ne sont pas vraiment pris en charge avec le courant S) ou vous pouvez utiliser un javascript paquet comme http://www.malsup.com/jquery/corner/.

    Il y a une autre option, qui ne devrait pas être écartée, même si elle n'est pas exactement idéal. Si vos contributions sont de longueur fixe, vous pouvez également tirer ce contexte (y compris les frontières) que vous voulez pour vos entrées dans une image et utiliser

    background: transparent url(pathToYourImage.png);
border: none;

    Cela a l'avantage de travailler sur à peu près tous les navigateurs que vous pouvez penser.

    bonjour, le plugin vous l'avez suggéré, c'est cool, et je l'utilise pour les divs. Cependant, je crains que ça ne fonctionne pas pour le texte-champs de saisie... une astuce ?
    Juste envelopper vos entrées dans un div?
    non, il ne fonctionne pas. Le wrapper est modifié, mais il est simplement placé derrière elle..
    effectivement, il fonctionne dans Safari, mais pas dans Firefox
    Voulez-vous dire que l'arrondi du div est placé derrière l'entrée? Dans ce cas il suffit de faire l'entrée transparent (voir mon exemple précédent, omettez simplement l'url() de la partie). Si c'est autre chose, un lien vers une démo, ce serait bien.

    OriginalL'auteur Joonas Trussmann

  2. 5

    Avec CSS3:

     /* css 3 */
 border-radius:5px;
 /* mozilla */
 -moz-border-radius:5px;
 /* webkit */
 -webkit-border-radius:5px;

    OriginalL'auteur Sarfraz

  3. 0

    Essayer quelque chose comme cela: http://hannivoort.org/test/InputRoundedCorners.asp

    OriginalL'auteur KPM

  4. 0

    moderne css3 navigateurs

    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

    en plus, vous aurez besoin d'utiliser un JS comme jquery avec coins arrondis plugin ou Ruzee

    OriginalL'auteur helle

  5. 0

    Peut-être que vous pourriez enlever les contours de champs de saisie, puis avec jQuery les mettre à l'intérieur d'une courbe boîte...

    OriginalL'auteur rabidmachine9

  6. 0

    ^ ce dernier fonctionne sur tous les navigateurs.
    Cependant, certains navigateurs ajoutez un contour! Chrome, safari, etc.

    Je sais que vous pouvez désactiver le contour en chrome à l'aide de contour:0, mais il n'y a aucun moyen que j'ai trouvé où vous pouvez désactiver l'aperçu du Safari. Il aura l'air monstrueux!!!

    OriginalL'auteur nick

  7. -1

    Utilisation border-radius utiliser des pixels en fonction de votre mise en page.

    Vous devez ajouter un exemple expliquant comment il fonctionne.
    border-radius: 2px;

    OriginalL'auteur stodgy.nerd