CSS3 Закругленный угол для элемента ввода без JS / изображений - PullRequest
Новая
       0

CSS3 Закругленный угол для элемента ввода без JS / изображений

5 голосов
/ 30 ноября 2010

Кто я могу сделать закругленный угол для элементов ввода?

Мне нужен способ без использования JavaScript и изображений ..

Добавлено: 

<!DOCTYPE html>
<html>
<head>    
    <title>xx</title>
<style type="text/css">
input
{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
</style>
</head>
<body>
<input type="text" value="test" />
</body>
</html>

Не работает в Firefox 3.6.12!

Ответы [ 4 ]

12 голосов
/ 30 ноября 2010

CSS3 имеет много новых функций, которые приносят пользу веб-дизайнерам. Это включает в себя округление границы: 

input
{
    -webkit-border-radius: 5px; //For Safari, etc.
    -moz-border-radius: 5px; //For Mozilla, etc.
    border-radius: 5px; //CSS3 Feature
}

Вы можете добавить класс в поля ввода и использовать этот класс в этом фрагменте CSS для нацеливания на определенные элементы ввода.

Internet Explorer 8 не поддерживает CSS3. Надеемся, что Internet Explorer 9 будет включать все его функции.

В связи с вашим отредактированным вопросом:

"text/css/" должно быть "text/css".

5 голосов
/ 30 ноября 2010

Для современных браузеров используйте следующий код CSS: 

input {
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   border-radius:6px;
}

Другими словами, в значительной степени именно то, что вы уже сделали.

Это должно сделать вас закругленными углами во всехосновные браузеры, кроме IE.

Я подозреваю, что это не работает, либо (а) вы тестируете его в IE (см. решение ниже), либо (б) потому что ваш тег <style>имеет неверный атрибут type.Вам, вероятно, вообще не нужен атрибут type;Я бы предложил полностью удалить его (обычно это видно только при загрузке таблиц стилей из внешнего источника).Если вы сохраните его, то удалите косую черту, поскольку это определенно неверно.

Для IE решение более сложное:

По far лучшее решениепроблема с закругленными углами CSS3 в IE: CSS3Pie .

Это взлом только для IE, основанный на функции IE, называемой CSS Behaviors.Это означает, что браузеры, отличные от IE, будут полностью игнорировать его, и ему даже не придется загружать файл .HTC, содержащий взлом.

Он генерирует истинные закругленные углы, используя библиотеку векторной графики VML IE, поэтому у вас никогда не будетлюбые неровные края или несоответствующие цвета фона или узоры.

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

CSS Behaviors - на основе Javascript - вы не найдете решения вашей проблемы, которое не использует Javascript где-то вдоль линии (если вы не планируете использовать старомодный уголграфику для всего), но поскольку она заключена в файл HTC для MS, другим браузерам не нужно об этом знать, поэтому вы можете использовать для них обычный CSS3 без JavaScript.

Это означает, что вмаловероятно, что у пользователей IE будет отключен Javascript, тогда да, они получат квадратный уголs.Но вы можете быть достаточно уверены, что они будут исчезающе небольшим меньшинством.

2 голосов
/ 30 ноября 2010

то, как вы делаете это правильно (для современных браузеров), проблема в том, что вы неправильно открываете тег стиля: 

<style type="text/css/">
                    ^^^ this / shouldn't be there

обратите внимание, что углы округления не будут работать в IE с вашим css, для этого вам нужно взглянуть на http://css3pie.com/ или использовать images / jsvascript.

0 голосов
/ 30 ноября 2010

CSS 3 поможет вам.

Эта таблица стилей работает и для элементов ввода [по крайней мере в современных браузерах], хотя не проверялась в IE 

 border-radius: 16px; /* half of button size + padding */
-moz-border-radius: 16px;
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa));
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);
...