Как изменить размер и стиль шрифта в почтовой форме?

голоса: 0

Добрый день Уважаемые!

Прошу помочь с редактированием формы обратной связи:

Необходимо изменить размер и стиль шрифта  в полях <input placeholder="Телефон" name="f2" size="30" style="width:100%;" maxlength="70" type="text">

В настоящий момент форма выглядит вот так:

Код:

<table style="background-color: rgb(195, 202, 221);" id="table1" align="" border="0" cellpadding="4" cellspacing="8" width="">
<tbody><tr><td><input placeholder="Ф.И.О." name="f1" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td><input placeholder="Телефон" name="f2" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td><input placeholder="E-mail" name="f3" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td><input placeholder="Необходимое оборудование" name="f4" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td><textarea rows="5" name="f5" cols="30" style="width:100%;"></textarea></td></tr>
<tr><td align="center"><br><input value="Отправить сообщение" type="submit"></td></tr>
</tbody></table>

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

| Автор: | Категория: Почтовые формы

Ответов: 1

Голоса: +1
 
Лучший ответ

В стили добавить:

#table1 input::-webkit-input-placeholder {font-size:15px;}
#table1 input:-moz-placeholder {font-size:15px;}
#table1 input:-o-placeholder {font-size:15px;}
#table1 input:-khtml-placeholder {font-size:15px;}
#table1 input:placeholder {font-size:15px;}

если нужно добавить свой шрифт, читаем материал http://htmlbook.ru/css/font-family я лишь прописал размер шрифта, можете регулировать под себя.

| Автор:
Выбор ответа лучшим | | Автор: Михаил Петров
Вы не могли бы скинуть скрин? сделал все по Вашей инструкции и даже загрузил через IE (+ перезапустил firefox). Не могу понять в чем дело.
Михаил Петров,

вот:

как видите шрифт слишком велик и 25 нужно менять примерно на 18-20

Очень странно! В Хроме выдает действительно как надо, но в firefox не хочет менять. Думаю это временное явление!
Большое спасибо за то, что вникли и "разложили все по полкам"!
Михаил Петров,

в общем и в мозиле работает, замените стили на:

#table1 input::-webkit-input-placeholder {font-size:15px;}
#table1 input::-moz-placeholder {font-size:15px;}
#table1 input::-o-placeholder {font-size:15px;}
#table1 input::-khtml-placeholder {font-size:15px;}
#table1 input::placeholder {font-size:15px;}

после все будет работать, шрифт 15 самый оптимальный и подходящий, все что свыше будет искажаться

Уважаемый Юрий, захотел поделиться кодом, вдруг кому пригодится!

Добавив стиль инпуту (высоту строчки), получаем вполне универсальный дизайн для обратных форм - шрифт любого размера + вводимый шрифт без каких-либо искажений!

 

#table1 input {height:30px; font-size:14px;}::-webkit-input-placeholder {font-size:15px; font-family: Tahoma; }
#table1 input {height:30px; font-size:14px;}::-moz-placeholder {font-size:14px; font-family: Tahoma;}
#table1 input {height:30px; font-size:14px;}::-o-placeholder {font-size:14px; font-family: Tahoma;}
#table1 input {height:30px; font-size:14px;}::-khtml-placeholder {font-size:14px; font-family: Tahoma;}
#table1 input {height:30px; font-size:14px;}::placeholder {font-size:14px; font-family: Tahoma;}

 

...