CSS: campi di immissione testo arrotondati

Question

Come posso rendere campi di testo arrotondati con css?

grazie

Answer 1

Entrambe le risposte sono corrette è possibile sia utilizzare gli stili CSS3 (che non sono realmente supportati con il attuali IE) oppure è possibile utilizzare un pacchetto javascript come http://www.malsup.com/jquery/corner/.

C'è comunque un'altra opzione, che non dovrebbe essere scartata anche se non è esattamente l'ideale. Se gli ingressi sono di lunghezza fissa è anche possibile disegnare qualsiasi background (comprese le frontiere) che si desidera per il loro inserimento in un'immagine e utilizzare

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

Questo ha il vantaggio di lavorare su quasi tutti i browser si può pensare.

Answer 2

Con CSS3:

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

Answer 3

provare qualcosa di simile: http://hannivoort.org/test/InputRoundedCorners.asp

Answer 4

nei moderni browser CSS3

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

negli anziani è necessario utilizzare un JS come jquery con il plugin rounded corners o Ruzee

Answer 5

Forse si potrebbe rimuovere i contorni dai campi di input e poi con jQuery metterli in una scatola di curva ...

Answer 6

^che l'ultimo funzionerà su tutti i browser. Tuttavia alcuni browser aggiungono un contorno! Chrome, Safari, ecc.

So che è possibile disattivare la struttura in chrome usando outline: 0, ma non è possibile trovare la posizione in cui è possibile disattivare la struttura in Safari. Sarà orribile!

Answer 7

Utilizzare border-radius pixel in base al layout.