Question

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

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

Необходимо изменить размер и стиль шрифта  в полях <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>

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

Answer 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 я лишь прописал размер шрифта, можете регулировать под себя.

Comments

Большое спасибо!
Попробую сейчас проверить!

---

Применять стиль надо как <table id=""> ?

---

Михаил Петров,

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

---

То есть готовый вид по идее должен выглядить так:
<table id="table1">
<tbody><tr><td><input placeholder="Ф.И.О." .... итд>
Боюсь где-то совершаю ошибку - наверное не получается правильно применить стиль.

---

Михаил Петров,

Это не стиль, вы просто применяете placeholder к инпуту, то есть задаете текст который будет отображаться в инпута в почтовой форме до того момента пока посетитель вашего сайта не активирует его и не начнет вводить свои данные.

> То есть готовый вид по идее должен выглядеть так

>> Готовый код почтовой формы у вас выше в примере, не понимаю о каком еще одном готовом коде речь. Стили добавлять в таблицу стилей CSS http://ваш-сайт.ру/panel/?a=tmpl;m=3;t=3 где вместо ваш сайт, ссылка на ваш сайт и в самый низ добавляем стили выше, после проверяем результат.

---

Прошу прощения, что ввел Вас в заблуждение - по невнимательности не "слона и не заметил", что id="table1" уже пресутствует.

Тогда проблем вообще не должно быть, но размер шрифта остатся прежним:

 

---

Михаил Петров,

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

---

http://ate.ucoz.ru

---

Михаил Петров,

так где конкретно установлена эта форма, ссылку на страницу предоставьте, на главной ничего не вижу и в контактах так же нет

---

Форма установлена на главной: $MFORM_2$

---

Михаил Петров,

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

---

Открыл доступ!
Извините за неудобства!

---

Михаил Петров,

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

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

вы исправили и сделали по своему:

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

в итоге ничего и не работает.

---

Исправил! Но результат тотже.

---

Михаил Петров,

не тот же, вы кеш очистьте выполнив комбинацию клавиш CTRL+F5 шрифт слишком большой в 25px и вы сами это увидите

---

Вы не могли бы скинуть скрин? сделал все по Вашей инструкции и даже загрузил через 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;}