CSS: поля с округлыми полями ввода

Question

Как я могу создавать поля с округлыми полями текста с помощью css?

благодаря

Answer 1

Оба ответа верны вы можете использовать стили CSS3 (которые на самом деле не поддерживаются с текущие IE), или вы можете использовать пакет javascript, такой как http://www.malsup.com/jquery/corner/.

Существует, однако, еще один вариант, который нельзя отбрасывать, даже если он не совсем идеален. Если входы фиксированной длины вы можете также сделать независимо фон (включая границы), которые вы хотите для ваших входов в изображение и использовать

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

Это имеет преимущество работы практически на все браузеры вы можете думать.

Answer 2

С CSS3:

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

Answer 3

попробовать что-то вроде этого: http://hannivoort.org/test/InputRoundedCorners.asp

Answer 4

в современных браузерах CSS3

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

в старше вам необходимо использовать JS как jquery с плагином rounded corners или Ruzee

Answer 5

Может быть, вы могли бы удалить контуры из поля ввода, а затем с JQuery поместить их в искривленной коробке ...

Answer 6

^этот последний будет работать на всех браузерах. Однако некоторые браузеры добавляют схему! Chrome, safari и т. Д.

Я знаю, что вы можете отключить контур в хроме, используя контур: 0, но я не нашел, где вы можете отключить контур в Safari. Это будет выглядеть отвратительно!

Answer 7

Используйте border-radius использование пикселей в соответствии с вашим расположением.