CSS: округленные поля ввода текста

Question

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

спасибо

Answer 1

С CSS3:

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

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

в более старших версиях вам нужно будет использовать jquery типа JS с закругленными углами плагином или Ruzee

Answer 7

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