CSS3 Округленный угол для элемента ввода без js/images

Кто я могу сделать закругленный угол для элементов ввода?CSS3 Округленный угол для элемента ввода без js/images

мне нужен способ без использования 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!

источник

2010-11-30 Isis

Возможный дубликат [Что является лучшим способом создания закругленных углов с помощью CSS?] (Http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners -using-css) – codingbadger 2010-11-30 12:55:13

См. мой отредактированный ответ. У вас есть ошибка в коде. – 2010-11-30 13:13:51

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".

источник

2010-11-30 12:59:21

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);

источник

2010-11-30 12:55:11

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

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

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

источник

2010-11-30 13:16:24 oezi

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

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

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

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

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

Для IE, решение является более сложным:

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

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

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

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

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

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

источник

2010-11-30 13:52:22 Spudley

CSS3 Округленный угол для элемента ввода без js/images

ответ

Смежные вопросы