Jump to content
  • 0

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

Serafim1991

Asked by Serafim1991,

 Share

Question

Serafim1991 Explorer

Serafim1991

Posted
Posted (edited)

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

  Reveal hidden contents

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

Вот так:

dpdqVPOq.png

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

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

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

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

Edited by Serafim1991
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
sigma77 Explorer

sigma77

Posted
Posted
  On 3/21/2012 at 10:50 AM, Serafim1991 said:

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted
  On 3/21/2012 at 11:08 AM, sigma77 said:

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

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

  On 3/21/2012 at 11:08 AM, sigma77 said:

input:focus + div

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

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

  On 3/21/2012 at 11:08 AM, sigma77 said:

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

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

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
  On 3/21/2012 at 11:42 AM, Serafim1991 said:

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

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

  On 3/21/2012 at 11:42 AM, Serafim1991 said:

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

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

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

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

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted

Спасибо.

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

Собственно, рисовать рамку с дивом я понял как. Размер меняется только по высоте(как я понял, это из-за position:absolute у дива).

Но, как обычно, без косяков не обойтись.

6RTvbPRR.png

Подвинул рамку свойствами 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;
        }

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted

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

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

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

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

Что не так?

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
  On 3/21/2012 at 2:17 PM, Serafim1991 said:

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

  On 3/21/2012 at 8:57 PM, Serafim1991 said:

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

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

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

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted
  On 3/22/2012 at 7:01 AM, sigma77 said:

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

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

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

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

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

  Reveal hidden contents

  On 3/22/2012 at 7:01 AM, sigma77 said:

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

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

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

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

Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

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


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

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted

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

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

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


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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept