Блог panig’а

О формах

Заметил, что почти во всех браузерах формы выглядят по-разному. Вообще я формы, если честно, не люблю. Поэтому с ними и решил разобраться.

Проблемой является то, что в простой текстовой форме, в разных браузерах текст ведет себя тоже по-разному.

Создаем страницу с одной формой

<body>

<input type=”text” class=”input” />

</body>


И стили к ней

.input {
width: 130px; height: 25px;
margin: 0;
padding: 0;
font-size: 10pt;
font-family: Verdana, Geneva, sans-serif;
outline: none;
border: 1px solid #606060;
 }


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


Не видно чтобы хоть один из браузеров отобразил то, что нужно, по идеи. Нужно чтобы текст был строго по вертикали и по центру, а отступ от левого края всегда должен быть одинаковым. Так как лучше всего, по-моему, отображает форму Google Chrome, я именно его и приведу в пример (высота указана без учета границ).

(то, как отображает форму Google Chrome)

Текст в форме не расположен по вертикали по центру.

(это то, что нужно)

У каждого браузера можно найти что-нибудь не правильное. Особенно выделился Internet Explorer. По вертикали он выше всех и исправить это у меня никак не получилось или как-нибудь можно?

Кстати, я заметил, что если текстовой форме не указывать высоту, то во всех браузерах вертикальное выравнивание одинаковое и только отстут от левого края разный.

Пока решения я не нашел, я пользуюсь другим способом. Принцип такой: нужно каждую форму обернуть тегом <span> и указать предполагаемые размеры для формы ему, а саму форму внутри тега растягивать на всю ширину и не менять высоту. Да, этот способ не помогает убрать отступ от левого края и настраивать форму немного сложнее, потому что если захочется поменять шрифт или его размер, то скорее всего придется немного пересчитать отступы от верхнего края.

Создаем форму и обернем ее тегом <span>

<body>

<span class="f-row">
<input type="text" class="input" /> </span>

</body>


Создаем стили для тега и формы

.f-row {
width: 130px; height: 24px;
padding: 1px 0 0;
border: 1px solid #606060;
display: block;
 }
.input {
width: 100%;
background: transparent;
margin: 0;
padding: 0;
font-size: 10pt;
font-family: Verdana, Geneva, sans-serif;
border: 0;
outline: none;
 }



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

Кстати, если форме сделать закругленные уголки с помощь css, то в Opera она не отобразится нормально, а точнее будет прозрачной. Поэтому-то и удобнее ее оборачивать в <span>.

комментарии (11)

captcha
Технологии «ModFree»