CSS: champs de saisie de texte arrondis

Question

Comment faire des champs de saisie de texte arrondis avec css?

grâce

Answer 1

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

Il existe cependant une autre option, qui ne devrait pas être abandonnée même si ce n'est pas exactement l'idéal. Si vos entrées sont de longueur fixe, vous pouvez également dessiner tout arrière-plan (y compris les frontières) que vous voulez pour vos entrées dans une image et utiliser

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

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

Answer 2

Avec CSS3:

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

Answer 3

Essayez quelque chose comme ceci: http://hannivoort.org/test/InputRoundedCorners.asp

Answer 4

dans les navigateurs CSS3 modernes

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

en plus vous aurez besoin d'utiliser un JS comme jquery avec rounded corners plugin ou Ruzee

Answer 5

Peut-être que vous pouvez supprimer les contours des champs d'entrée, puis avec jQuery les mettre dans une boîte incurvée ...

Answer 6

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

Je sais que vous pouvez désactiver le contour en chrome en utilisant le contour: 0, mais il n'y a aucun moyen que je trouve où vous pouvez désactiver le contour dans Safari. Il aura l'air hideux!

Answer 7

Utilisez les pixels border-radius en fonction de votre disposition.