Serafim1991

В коде выше я их убрал, чтобы не позориться. Ошибка была в неправильном подключении. У меня было вот так: <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> $(document).ready(function() { $('input, select, textarea').focus(function() { $(this).parent('li').addClass('active'); }); $('input, select, textarea').blur(function() { $(this).parent('li').removeClass('active'); }); }); </script> Теперь буду знать, что подключаемый файл нужно записывать в отдельные теги <script> ... </script> Поставленная задача решена, всем спасибо.

Уже стыдно становится, но по прежнему ничего не вышло. У дива оставил absolute, для li добавил relative, но проблемы все те же. Убрал в focus+div padding, но высота по прежнему на 20px больше, чем я указываю. Вот последняя версия Я его и подключаю. Сам скрипт у меня внутри тега head. Пробовал подключать 2 файла(jQuery и файл с скриптом), но результат столь же плачевный.

Что-то странное творится с этим JS и jQuery Подключил файл(пробовал как с диска, так и с интернета), добавил этот скрипт, добавил свойства для active,но работать он отказывается, хотя на jsfiddle.net все работает. Скрипт между внутри тега head. Меня смутило только отсутствие имени функции, но раз на jsfiddle работает, значит так можно делать. Что не так?

Уж лучше чистый JS Я его не знаю на должном уровне, но там проще разобрать что почем. P.S. я все же постараюсь решить проблему без использования JS

Спасибо. Можно я вас еще помучаю?) Собственно, рисовать рамку с дивом я понял как. Размер меняется только по высоте(как я понял, это из-за position:absolute у дива). Но, как обычно, без косяков не обойтись. Подвинул рамку свойствами bottom и right к верхнему левому углу. Проблемы: 1. Ширина меняется(ширина формы 450px), но если она превышает 380px(определил методом изменения ширины рамки свойством width), то начинается увеличиваться и сама форма(элементы li) 2. Как видно на картинке, поле с фокусом увеличивается на размер рамки(само поле 20px, соответственно, когда оно получает фокус, то его размер становится 40px) 3. С полем textarea(на скриншоте - Адресс) вообще проблема. Теоретически, их можно вынести в отдельное свойство и там при условии, что textarea имеет фокус, менять цвет рамки... Но практически - не знаю, смутно себе это представляю. Как растянуть ее до нужной мне ширины, минуя те проблемы, которые я описал выше и избавиться от увеличение элемента li в размерах по высоте? Вот, как я это описал .div { position:absolute;} form#payment input:not([type=submit]):focus + div, form#payment textarea:focus + div { border-color: #00E5EE; border-color: rgba(0,229,238,.7); border-style: solid; border-width: 2px; border-radius: 5px; padding: 20px; margin-bottom: 2px; position:relative; bottom: 40px; right: 12px; width: 420px; }

А почему после? Почему не перед label открыть div и после input его закрыть? А так разве можно?(ну "+ div" писать) Или я не правильно понял? Я с HTML+CSS не особо-то дружу) А уж о JS даже не думаю на данный момент

Есть следующий код: Требуется чтобы при фокусе определенного инпута, бордер вокруг этого поля менял свой цвет. Вот так: Первый элемент - это фокус содержащегося в нем инпута. Остальные - неактивные. (картинка сделала в Paint с подменой цвета) Закоментированная фраза в стилях - это мои мысли по поводу того, как это сделать. Только я не учел, что фокус принимает инпут, а не элемент списка li(ol) Это вообще реально? Если да, дайте подсказку, как это оформить(полное решение конечно хорошо, но лучше если я сам дойду до этого с некоторыми подсказками)

Если бы все было так просто. Простым height обходиться - не совсем то что нужно. Размер textarea может изменяться от 1 до 15(ну вернее не может, а должен) и будет довольно глупо выглядеть, если для пары слов будет выделена такая большая площадь для написания текста.

Насчет этого ресайза. Можно ли как-то выставить ограничение на количество линий? Добавил в CSS textarea { resize:vertical; } в итоге имею невозможность изменять размер по горизонтали(что мне и нужно), но по вертикали размер изменяется до бесконечности. А хотелось бы, к примеру, чтобы больше 10 строк по высоте размер изменить было невозможно. Или это только при помощи JS можно осуществить?

А можно примеры? Погуглить не сложно, но я немного опасаюсь. Был неудачный опыт с html-книгами и видео-курсами. Неудачный в том плане, что я доходил до половины курса, а затем находил нелицеприятные отзывы об авторах и пришлось эти курсы прерывать)

Спасибо, попробуем, поэкспериментируем.

Вопрос следующий: возможно ли используя только html оформить подсказки таким образом, чтобы про фокусе определенного элемента появлялась определенная подсказка. Что-то типа placeholder только в несколько ином виде. Пример: Когда элемент в фокусе(инпут выделен синим цветом), то сбоку от него(местоположение не столь важно) появляется некое окошко, где написана подсказка, что нужно делать(к примеру, в данном случае может быть написан следующий текст: "Имя может содержать большие и маленькие буквы кириллицы. Имя должно начинаться с большой буквы и содержать не более 15 символов.") Если на первый вопрос ответ окажется утвердительным, то есть еще 1 вопрос: поддаются ли такие подсказки(созданные при помощи html ) стилизации с использованием css.

Да, теперь работает. Я думал "убери value="select"" значит, что нужно полностью его убрать. Благодарю. Можно закрывать.

Я так и сделал, но не работает. Вот скрин Вот сами файлы, можете сами убедиться http://dump.ru/file/5612778

Как-то я упустил момент "по умолчанию". Спасибо, буду знать. А проблема в том, что этот select должен быть обязательным для заполнения(и если он не выбран(т.е. в списке видна надпись "Выберите страну"), то вывести об этом сообщение. С сообщением все в порядке, а вот с обязательным выбором - нет). Насколько мне известно, placeholder не работает с select, поэтому не нашел ничего умнее, чем подсказку для этого выпадающего списка сделать одним из вариантов. Есть какой-нибудь вариант решения сей проблемы(чтобы заработал required, но в то же время выпадающий список остался выпадающим списком)?

Собственно проблема в названии темы. Required не желает работать с select <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Форма регистрации</title> <link rel="stylesheet" type="text/css" href="Style.css"> </head> <body> <form action ='Script.php' method ='POST'> <fieldset> <legend>Заполните форму</legend> <fieldset> <legend>Информация о студенте</legend> <p align="right"class="header">Фамилия:<a class="star">*</a> <input class="field" type="text" required ></p> <p align="right" class="header">Имя:<a class="star">*</a> <input class="field" type="text" required ></p> <p align="right"class="header">Отчество:<a class="star">*</a> <input class="field" type="text" required ></p> <p align="right"class="header">Домашний телефон: <input class="field" type="text"></p> <p align="right"class="header">Мобильный телефон: <input class="field" type="text"></p> <p align="right"class="header">E-mail:<a class="star">*</a> <input class="field" type="email" required></p> <p align="right" class="header1">Страна:<a class="star">*</a> <select required name="Country" class="field1" id="Country" /> <option value="select">Выберите страну...</option> <option value="Russia">Россия</option> <option value="Ukraine">Украина</option> <option value="Belarus">Беларусь</option> </select> </p> <p align="right"class="header">Город: <input class="field" type="text" /><span></span></p></fieldset> <fieldset> <legend>Информация о ВУЗе: </legend> <p align="right"class="header">Название:<a class="star">*</a> <input class="field" type="text" required></p> <p align="right"class="header">Факультет:<a class="star">*</a> <input class="field" type="text" required></p> <p align="right"class="header">Группа:<a class="star">*</a> <input class="field" type="text" required></p> <p align="right"class="header">Курс: <input class="field" type="text" /><span></span></p> </fieldset> <p class="hint"><a class="star">*</a> - поля, обязательные для заполнения</p> <!--<div><button>Отправить</button></div> --> <p><input type="submit" value="Отправить" /></p> </fieldset> </form> </body> </html> Ошибок вроде нет, форма работает вполне адекватно, кроме этого момента. СSS и PHP скрипт не прилагаю, отключал оба файла, но Required все равно не работает. Браузер Google Chrome 16.