Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Форма с закругленными углами


Автор: Vex 11.7.2011, 14:50
Как можно закруглить углы в форме?

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style>
#contact-area {
  width: 600px;
  margin-top: 25px;
}
#contact-area input, #contact-area textarea {
  padding:   5px;
  width: 400px;
  font-family: Helvetica, sans-serif;
  font-size: 1.4em;
  margin: 0px 0px 10px 0px;
  border: 2px solid   #ccc;
}
#contact-area textarea {
  height: 90px;
}
#contact-area   textarea:focus, #contact-area input:focus {
  border: 2px solid   #900;
}
#contact-area input.submit-button {
  width: 100px;
  float:   right;
}
label {
  float: left;
  text-align: right;
  margin-right: 15px;
  width: 100px;
  padding-top: 5px;
  font-size: 1.4em;
}
</style>

</head>
<body>

<div id="contact-area">
  <form method="post"   action="contactengine.php">
  <label for="Name" id="Name"   onfocus="this.value=''; this.onfocus=null;">Имя:</label>
  <input   type="text" name="Name" />
  <label for="City"   id="City">Город:</label>
  <input type="text" name="City"   />
  <label for="Email" id="Email">Email:</label>
  <input   type="text" name="Email" />
  <label for="Message"   id="Message">Сообщение:</label><br />
  <textarea   name="Message" rows="20" cols="20" onfocus="this.value='';   this.onfocus=null;">Введите свое имя</textarea>
  <input   type="submit" name="submit" value="Отправить" class="submit-button"   />
  </form>
</div>



</body>
</hrml>





Без четырех рисунков по бокам не обойтись? (

Автор: Guedda 11.7.2011, 15:43
Ну если под современные браузеры (использующие css3.0), то так:
Код

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

Такая конструкция работает в IE 9.0+, всех версиях хрома, сафари, FF 3.6, 4, 5+

Добавлено через 13 секунд
Иначе только с картинками.

Автор: SelenIT 11.7.2011, 15:44
Все браузеры, кроме IE8-, понимают border-radius. Для IE8- есть "костыли" типа PIE.htc или DD_roundies.js...

Автор: Guedda 11.7.2011, 15:46
Цитата(SelenIT @  11.7.2011,  16:44 Найти цитируемый пост)
Все браузеры, кроме IE8-, понимают border-radius.

FF 3.6 это свойство не понимает. Для него работает -moz-border-radius

Автор: Vex 11.7.2011, 17:28
Guedda, Спасибо! )

Автор: Evghenusi 12.7.2011, 16:08
Цитата(SelenIT @  11.7.2011,  15:44 Найти цитируемый пост)
Для IE8- есть "костыли" типа PIE.htc

IE6 тоже работает с этим костылём

Автор: SelenIT 13.7.2011, 04:09
Цитата(Evghenusi @  12.7.2011,  16:08 Найти цитируемый пост)
IE6 тоже работает с этим костылём

Ну да (минусик после версии традиционно означает "и ниже"). Хотя сейчас сильно заморачиваться украшательствами под 6-й, имхо, уже ни к чему (если сайт не для Китая/Южной Кореи, где IE6 почему-то никак не хочет пока сдавать позиции).

Добавлено через 5 минут и 53 секунды
Цитата(Guedda @  11.7.2011,  15:46 Найти цитируемый пост)
FF 3.6 это свойство не понимает

Согласен. Почему-то мне казалось, что с выходом 5-й версии вся третья ветка утратила актуальность, но глянул http://www.liveinternet.ru/stat/ru/browsers.html?period=month&id=21&id=3&id=49&id=37&id=35&id=36&id=50&show=%D0%BF%D0%B5%D1%80%D0%B5%D1%81%D1%82%D1%80%D0%BE%D0%B8%D1%82%D1%8C+%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA&per_page=10&report=browsers.html%3Fperiod%3Dmonth - увы, еще не совсем...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)