Элементы списка и инпуты

Serafim1991 · March 21, 2012

Есть следующий код:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Регистрационная форма</title>
<style type="text/css">
html, body, h1, form, fieldset, legend, ol, li {
        margin: 0;
        padding: 0;
        }

body {
        background: #ffffff;
        color: #111111;
        font-family: Georgia, "Times New Roman", Times, serif;
        padding: 20px;
        }
form#payment {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	counter-reset: fieldsets;
	padding: 20px;
	width: 450px;
	background: #696969;
        }
form#payment fieldset {
        border: none;
        margin-bottom: 10px;
        }

form#payment fieldset:last-of-type {
        margin-bottom: 0;
        }
form#payment legend {
        color: #FFA500;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 10px;
        text-shadow: 3px 3px 3px #000000;
        }
form#payment > fieldset > legend:before {
        content: "Шаг " counter(fieldsets) ": ";
        counter-increment: fieldsets;
        }
form#payment > fieldset > legend:before {
        content: "Шаг " counter(fieldsets) ": ";
        counter-increment: fieldsets;
        }
form#payment ol li {
        background: #71b8ff;
        background: rgba(255,255,255,.3);
        border-color: #c6e3ff;
        border-color: rgba(83,134,139,.7);
        border-style: solid;
        border-width: 2px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        line-height: 30px;
        list-style: none;
        padding: 5px 10px;
        margin-bottom: 2px;
        }

form#payment ol ol li {
        background: none;
        border: none;
        float: left;
        }
form#payment label {
        float: left;
        font-size: 13px;
        width: 160px;
        }

form#payment fieldset fieldset label {
        background:none no-repeat left 50%;
        line-height: 20px;
        padding: 0 0 0 30px;
        width: auto;
        }
form#payment fieldset fieldset label:hover {
        cursor: pointer;
        }
form#payment input:not([type=radio]),
form#payment textarea, select {
        background: #ffffff;
        border: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        font: italic 13px Georgia, "Times New Roman", Times, serif;
        outline: none;
        padding: 7px;
        width: 250px;

        }
textarea {
		resize: vertical;
		}

form#payment input:not([type=submit]):focus,
form#payment textarea:focus {
        background: #DCDCDC;
        }

<!--form#payment ol:focus, li:focus {border-color: rgba(0,229,238,.7);

		} -->

form#payment input[type=radio] {
        float: left;
        margin-right: 10px;
        }
form#payment button {
        background: #828282;
        border: none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff;
        display: block;
        font: 18px Georgia, "Times New Roman", Times, serif;
        letter-spacing: 1px;
        margin: auto;
        padding: 7px 25px;
        text-shadow: 0 1px 1px #C1F7FF;
        text-transform: uppercase;
		position:relative;
        }
form#payment button:hover {
        background: #8BE0FF;
        cursor: pointer;
        }
</style>
</head>

<body>
<form id="payment">
  <fieldset>
          <legend>Персональные данные</legend>
          <ol>
                  <li>
                          <label for="name">Имя</label>
                          <input id="name" name="name"  type="text" placeholder="Введите имя" required autofocus>

                  </li>
                  <li>
                  		  <label for="surname">Фамилия</label>
                          <input id="surname" name="surname" type="text" placeholder="Введите фамилию" required >
                          </li>
                  <li>
                          <label for="email">E-mail</label>
                          <input id="email" name="email" type="email" placeholder="example@domain.com" required>
                  </li>
                  <li>
                          <label for="phone">Телефон (дом.)</label>
                          <input id="phone" name="phone" type="tel" placeholder="Eg. +064511111" required>
                  </li>
                  <li>
                          <label for="Mobphone">Телефон (моб.)</label>
                          <input id="Mobphone" name="phone" type="tel" placeholder="Eg. +380661111111" required>
                  </li>
          </ol>
  </fieldset>
  <fieldset>
          <legend>Место жительства</legend>
          <ol>
                  <li>
                                    <label for="country">Страна</label>
                                        <select required name="Country"  id="country">
                                          <option value ="" disabled>Выберите cтрану...</option>  
                                          <option value="t1">Опция №1</option>  
                                          <option value="t2">Опция №2</option>  
                                          <option value="t3">Опция №3</option>  
                                          <option value="t4">Опция №4</option>  
                                        </select>
                    </li>
                          <li>
                                  <label for="city">Город</label>
                                  <select required name="city" id="city">
                                          <option value ="" disabled>Выберите город...</option>  
                                          <option value="t1">Опция №1</option>  
                                          <option value="t2">Опция №2</option>  
                                          <option value="t3">Опция №3</option>  
                                          <option value="t4">Опция №4</option>  
                                        </select>
                          </li>
                  <li>
                          <label for="address">Адресс</label>
                          <textarea id="address" name="address" rows="3" placeholder="Eg: Ул. Гагарина, д. 51, кв. 23" required></textarea>
                  </li>
                  <li>
                          <label for="postcode">Почтовый индекс</label>
                          <input id="postcode" name="postcode" type="text">
                  </li>

          </ol>
  </fieldset>
  <fieldset>
          <legend>Информация об учебном заведении</legend>
          <ol>

                  <li>
                          <label for="nazva">Название</label>
                          <textarea id="nazva"  rows="4" name="nazva" type="text" placeholder="Северодонецкий технологический институт Восточноукраинского национального университета имени В. Даля" required></textarea>
                  </li>
                  <li>
                          <label for="adress">Страна, город</label>
                          <input id="adress" name="adress" type="text" placeholder="Eg: Украина, Киев" required>
                  </li>
                  <li>
                          <label for="lvl">Уровень аккредитации</label>
                          <select required name="lvl" id="lvl">
                                          <option value ="" disabled>Выберите уровень...</option>  
                                          <option value="1">Первый уровень аккредитации</option>  
                                          <option value="2">Второй уровень аккредитации</option>  
                                          <option value="3">Третий уровень аккредитации</option>  
                                          <option value="4">Четвертый уровень аккредитации</option>  
                                        </select>
                  </li>
                  <li>

                          <fieldset>
                                  <label>Форма обучения</label><br />
                                  <ol>
                                          <li>
                                                  <input id="dnev" name="forma" type="radio" required>
                                                  <label for="dnev">Дневная</label>
                                          </li>
                                          <li>
                                                  <input id="zao"  name="forma" type="radio" required>
                                                  <label for="zao">Заочная</label>
                                          </li>
                                          <li>
                                                  <input id="eks"  name="forma" type="radio" required>
                                                  <label for="eks">Экстернат</label>
                                          </li>
                                  </ol>
                          </fieldset>
                  </li>
                  <li>
                          <fieldset>
                                  <label>Вид обучения</label><br />
                                  <ol>
                                          <li>
                                                  <input id="bud" name="vid" type="radio" required>
                                                  <label for="bud">Бюджет</label>
                                          </li>
                                          <li>
                                                  <input id="kont" name="vid" type="radio" required>
                                                  <label for="kont">Контракт</label>
                                          </li>
                                  </ol>
                          </fieldset>
                  </li>
          </ol>
  </fieldset>
  <fieldset>
        <button type=submit>Отправить</button> 
    <button type=reset>Очистить</button>
  </fieldset>
  </form>
</body>
</html>

Требуется чтобы при фокусе определенного инпута, бордер вокруг этого поля менял свой цвет.

Вот так:

Первый элемент - это фокус содержащегося в нем инпута. Остальные - неактивные.

(картинка сделала в Paint с подменой цвета)

Закоментированная фраза в стилях - это мои мысли по поводу того, как это сделать. Только я не учел, что фокус принимает инпут, а не элемент списка li(ol)

Это вообще реально? Если да, дайте подсказку, как это оформить(полное решение конечно хорошо, но лучше если я сам дойду до этого с некоторыми подсказками)

Edited March 21, 2012 by Serafim1991

sigma77 · March 21, 2012

Это вообще реально? Если да, дайте подсказку, как это оформить(полное решение конечно хорошо, но лучше если я сам дойду до этого с некоторыми подсказками)

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

Добавляешь после инпута див с position: absolute и селектором input:focus + div задаешь ему положение и зеленую границу.

Но вообще, я бы такое делала на js.

п.с. И еще. Внутри стилей комментрий  недопустим. Используй /* */

Serafim1991 · March 21, 2012

Добавляешь после инпута див с position: absolute и селектором input:focus + div задаешь ему положение и зеленую границу.

А почему после? Почему не перед label открыть div и после input его закрыть?

input:focus + div

А так разве можно?(ну "+ div" писать)

Или я не правильно понял?

Но вообще, я бы такое делала на js.

Я с HTML+CSS не особо-то дружу) А уж о JS даже не думаю на данный момент

sigma77 · March 21, 2012

А почему после? Почему не перед label открыть div и после input его закрыть?

Потому что мы не можем выбрать предка у элемента. Только дочерние или соседские элементы.

А так разве можно?(ну "+ div" писать)
Или я не правильно понял?

Можно. http://htmlbook.ru/samcss/sosednie-selektory

Вообще почитайте о видах селекторов.

Serafim1991 · March 21, 2012

Спасибо.

Можно я вас еще помучаю?)

Собственно, рисовать рамку с дивом я понял как. Размер меняется только по высоте(как я понял, это из-за 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;
        }

br3t · March 21, 2012

Решение с jQuery http://jsfiddle.net/br3t/UaDaF/

Если его не юзаете - можно подогнать под чистый javascript

Serafim1991 · March 21, 2012

Уж лучше чистый JS

Я его не знаю на должном уровне, но там проще разобрать что почем.

P.S. я все же постараюсь решить проблему без использования JS

Serafim1991 · March 21, 2012

Что-то странное творится с этим JS и jQuery

Подключил файл(пробовал как с диска, так и с интернета), добавил этот скрипт, добавил свойства для active,но работать он отказывается, хотя на jsfiddle.net все работает.

Скрипт между внутри тега head.

Меня смутило только отсутствие имени функции, но раз на jsfiddle работает, значит так можно делать.

Что не так?

sigma77 · March 22, 2012

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

Не совсем так. Li изменяется по высоте потому что ты меняешь position с absolute на relative и у тебя этот див становится в потоке.

Тебе нужно оставить absolute у дива, а релатив задать li. Тогда ты сможешь координатами top, left, right, bottom растянуть див на нужную ширину и высоту, и привязать див к конкретному элементу списка.

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

А сам jQuery ты подключаешь?

Serafim1991 · March 22, 2012

Не совсем так. Li изменяется по высоте потому что ты меняешь position с absolute на relative и у тебя этот див становится в потоке.
Тебе нужно оставить absolute у дива, а релатив задать li. Тогда ты сможешь координатами top, left, right, bottom растянуть див на нужную ширину и высоту, и привязать див к конкретному элементу списка.

Уже стыдно становится, но по прежнему ничего не вышло.

У дива оставил absolute, для li добавил relative, но проблемы все те же. Убрал в focus+div padding, но высота по прежнему на 20px больше, чем я указываю.

Вот последняя версия


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Регистрационная форма</title>
<style type="text/css">

html, body, h1, form, fieldset, legend, ol, li {
        margin: 0;
        padding: 0;
        }

body {
        background: #ffffff;
        color: #111111;
        font-family: Georgia, "Times New Roman", Times, serif;
        padding: 20px;
        }
form#payment {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	counter-reset: fieldsets;
	padding: 20px;
	width: 450px;
	background: #696969;
        }
form#payment fieldset {
        border: none;
        margin-bottom: 10px;
        }

form#payment fieldset:last-of-type {
        margin-bottom: 0;
        }
form#payment legend {
        color: #FFA500;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 10px;
        text-shadow: 3px 3px 3px #000000;
        }
form#payment > fieldset > legend:before {
        content: "Шаг " counter(fieldsets) ": ";
        counter-increment: fieldsets;
        }
form#payment > fieldset > legend:before {
        content: "Шаг " counter(fieldsets) ": ";
        counter-increment: fieldsets;
        }
form#payment ol li {
        background: #71b8ff;
        background: rgba(255,255,255,.3);
        border-color: #c6e3ff;
        border-color: rgba(83,134,139,.7);
        border-style: solid;
        border-width: 2px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        line-height: 30px;
        list-style: none;
        padding: 5px 10px;
        margin-bottom: 2px;
		position:relative;
        }

form#payment ol ol li {
        background: none;
        border: none;
        float: left;
				position:relative;
        }
form#payment label {
        float: left;
        font-size: 13px;
        width: 160px;
        }

form#payment fieldset fieldset label {
        background:none no-repeat left 50%;
        line-height: 20px;
        padding: 0 0 0 30px;
        width: auto;
        }
form#payment fieldset fieldset label:hover {
        cursor: pointer;
        }
form#payment input:not([type=radio]),
form#payment textarea, select {
        background: #ffffff;
        border: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        font: italic 13px Georgia, "Times New Roman", Times, serif;
        outline: none;
        padding: 7px;
        width: 250px;

        }
textarea {
		resize: vertical;
		}

.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;
        margin-bottom: 2px;
		position:relative;
		bottom: 40px;
		right: 12px;
		width: 420px;
		height: 40px;
        }

form#payment input[type=radio] {
        float: left;
        margin-right: 10px;
        }
form#payment button {
        background: #828282;
        border: none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff;
        display: block;
        font: 18px Georgia, "Times New Roman", Times, serif;
        letter-spacing: 1px;
        margin: auto;
        padding: 7px 25px;
        text-shadow: 0 1px 1px #C1F7FF;
        text-transform: uppercase;
		position:relative;
        }
form#payment button:hover {
        background: #8BE0FF;
        cursor: pointer;
        }
form#payment ol li.active {
    border:2px solid cyan;
}
</style>
</head>

<body>
<form action="script.php" method="POST" id="payment">
  <fieldset>
          <legend>Персональные данные</legend>
          <ol>
                  <li>
                          <label for="name">Имя</label>
                          <input id="name" name="name"  type="text" placeholder="Введите имя" required autofocus>
                         <div></div>
                  </li>
                  <li>
                  		  <label for="surname">Фамилия</label>
                          <input id="surname" name="surname" type="text" placeholder="Введите фамилию" required >
                          <div></div>
                          </li>
                  <li>
                          <label for="email">E-mail</label>
                          <input id="email" name="email" type="email" placeholder="example@domain.com" required>
                  			<div></div>
                  </li>
                  <li>
                          <label for="phone">Телефон (дом.)</label>
                          <input id="phone" name="phone" type="tel" placeholder="Eg. +064511111" required>
                          <div></div>
                  </li>
                  <li>
                          <label for="Mobphone">Телефон (моб.)</label>
                          <input id="Mobphone" name="phone" type="tel" placeholder="Eg. +380661111111" required>
                          <div></div>
                  </li>
          </ol>
  </fieldset>
  <fieldset>
          <legend>Место жительства</legend>
          <ol>
                  <li>
                                    <label for="country">Страна</label>
                                        <select required name="country"  id="country">
                                          <option value ="" disabled>Выберите cтрану...</option>  
                                          <option value="t1">Опция №1</option>  
                                          <option value="t2">Опция №2</option>  
                                          <option value="t3">Опция №3</option>  
                                          <option value="t4">Опция №4</option>  
                                        </select>
                                        <div></div>
                    </li>
                          <li>
                                  <label for="city">Город</label>
                                  <select required name="city" id="city">
                                          <option value ="" disabled>Выберите город...</option>  
                                          <option value="t1">Опция №1</option>  
                                          <option value="t2">Опция №2</option>  
                                          <option value="t3">Опция №3</option>  
                                          <option value="t4">Опция №4</option>  
                                        </select>
                                        <div></div>
                          </li>
                  <li>
                          <label for="address">Адресс</label>
                          <textarea id="address" name="address" rows="3" placeholder="Eg: Ул. Гагарина, д. 51, кв. 23" required></textarea>
                          <div></div>
                  </li>
                  <li>
                          <label for="postcode">Почтовый индекс</label>
                          <input id="postcode" name="postcode" type="text">
                          <div></div>
                  </li>

          </ol>
  </fieldset>
  <fieldset>
          <legend>Информация об учебном заведении</legend>
          <ol>

                  <li>
                          <label for="nazva">Название</label>
                          <textarea id="nazva"  rows="4" name="nazva"  placeholder="Северодонецкий технологический институт Восточноукраинского национального университета имени В. Даля" required></textarea>
                          <div></div>
                  </li>
                  <li>
                          <label for="adrinst">Страна, город</label>
                          <input id="adrinst" name="adrinst" type="text" placeholder="Eg: Украина, Киев" required>
                          <div></div>
                  </li>
                  <li>
                          <label for="lvl">Уровень аккредитации</label>
                          <select required name="lvl" id="lvl">
                                          <option value ="" disabled>Выберите уровень...</option>  
                                          <option value="1">Первый уровень аккредитации</option>  
                                          <option value="2">Второй уровень аккредитации</option>  
                                          <option value="3">Третий уровень аккредитации</option>  
                                          <option value="4">Четвертый уровень аккредитации</option>  
                                        </select>
                                        <div></div>
                  </li>
                  <li>

                          <fieldset>
                                  <label>Форма обучения</label><br />
                                  <ol>
                                          <li>
                                                  <input id="dnev" name="forma" type="radio" required>
                                                  <label for="dnev">Дневная</label>
                                                  <div></div>
                                          </li>
                                          <li>
                                                  <input id="zao"  name="forma" type="radio" required>
                                                  <label for="zao">Заочная</label>
                                                  <div></div>
                                          </li>
                                          <li>
                                                  <input id="eks"  name="forma" type="radio" required>
                                                  <label for="eks">Экстернат</label>
                                                  <div></div>
                                          </li>
                                  </ol>
                          </fieldset>
                  </li>
                  <li>
                          <fieldset>
                                  <label>Вид обучения</label><br />
                                  <ol>
                                          <li>
                                                  <input id="bud" name="vid" type="radio" required>
                                                  <label for="bud">Бюджет</label>
                                                  <div></div>
                                          </li>
                                          <li>
                                                  <input id="kont" name="vid" type="radio" required>
                                                  <label for="kont">Контракт</label>
                                                  <div></div>
                                          </li>
                                  </ol>
                          </fieldset>
                  </li>
          </ol>
  </fieldset>
  <fieldset>
        <button type=submit>Отправить</button> 
    <button type=reset>Очистить</button>
  </fieldset>
  </form>
</body>
</html>

А сам jQuery ты подключаешь?

Я его и подключаю.

Сам скрипт у меня внутри тега head.

Пробовал подключать 2 файла(jQuery и файл с скриптом), но результат столь же плачевный.

Switch74 · March 22, 2012

как подключаешь, в коде выше я скриптов не наблюдаю


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function()
{
   //здесь пишем все свои команды, или после тега </html>
});
</script>

Serafim1991 · March 23, 2012

В коде выше я их убрал, чтобы не позориться.

Ошибка была в неправильном подключении.

У меня было вот так:


<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>

Поставленная задача решена, всем спасибо.

Sign In

Элементы списка и инпуты

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information