Перейти к содержанию
СофтФорум - всё о компьютерах и не только

input с закруглёнными углами


Рекомендуемые сообщения

Все видели, в левом верхнем углу на софтодроме есть поиск (прямоугольник для ввода и кнопка "найти"), а как сделать этот прямоугольник с закруглёнными углами??? :1eye:

Заранее спасибо!

Ссылка на комментарий
Поделиться на другие сайты

Semens: На простом HTML или CSS здесь по-моему не обойтись

Но можно сделать графикой, нужно будет сделать три рисунка gif

input_left и input_right - это правый и левый бордер input'a, они должны быть высотой как и input и они должны имитировать скругленные углы

input_bg - имитирует верхний и нижний бордер, высота как и у предыдущих, ширина 1px

Итак, сначала нарисуем сам input:

<table class="r_input" width="Ширина текстового поля"><tr><td width="ширина левой картинки"><img src="input_left.gif" width="ширина левой картинки" /></td><td class="r_input"><input type="text" name="yourname" /></td><td width="ширина правой картинки"><img src="input_right.gif" width="ширина правой картинки" /></td></tr></table>

Но это еще будет криво, а чтоб все стояло на своих местах надо добавить CSS:

table.r_input td { margin:0;pading:0; border:none;}td.r_input { margin:0;pading:0; border:none; background: transparent url("input_bg.gif") scroll repeat-y;}td.r_input input { margin:0;pading:0; border:none; width:100%;}

Удачи!

Ссылка на комментарий
Поделиться на другие сайты

Лорд Дмитрий, спасибо. Мне приходила в голову идея реализации именно таким способом, но потом почему-то показалось, что есть способ намного легче, о котором я не знаю.... По всей вероятности его нету :D За код спасибо, теперь мне не придётся самому экспериментировать, за это + 1

Ссылка на комментарий
Поделиться на другие сайты

Гость
Эта тема закрыта для публикации ответов.
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...