+ Ответить в теме
Показано с 1 по 2 из 2

Тема: Изменить цвет "stroke" SVG при input:focus

  1. #1
    Новичок Sejmon на пути к лучшему Аватар для Sejmon
    Регистрация
    01.01.2019
    Сообщений
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Изменить цвет "stroke" SVG при input:focus

    Добрый день.



    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>

    <form action="">
    <input class="search-form" type="text">
    <button>
    <svg id="svg-search" width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M6.50001 12C9.53759 12 12 9.53758 12 6.50001C12 3.46244 9.53759 1 6.50001 1C3.46244 1 1 3.46244 1 6.50001C1 9.53758 3.46244 12 6.50001 12Z" stroke="white" stroke-opacity="0.4" stroke-width="2"/>
    <path d="M10 11L14 15" stroke="white" stroke-opacity="0.4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    </button>
    </form>


    </body>
    </html>




    body {
    background-color: black;
    color: white;
    }

    button {
    background: none;
    border: none;
    }

    .search-form input:hover + #svg-search path {
    stroke: pink;
    }



    Как поменять цвет SVG при фокусе инпута. как в примере CSS - не работает. Если убираем .search-form input:hover + , и оставляем только #svg-search path {
    stroke: pink;
    } - то цвет меняется, но естественно и без фокусировки на инпуте.

    Реализовать нужно без JS


    Предварительно, спасибо!

  2. #2
    Новичок Sejmon на пути к лучшему Аватар для Sejmon
    Регистрация
    01.01.2019
    Сообщений
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Нашел решение
    Неверно обращался к селектору


    input.search-form:focus + button #svg-search path {
    stroke: pink;
    }

+ Ответить в теме

Похожие темы

  1. Вопрос про ":focus"
    от kombat003 в разделе CSS
    Ответов: 2
    Последнее сообщение: 26.01.2015, 14:20
  2. Ответов: 1
    Последнее сообщение: 22.07.2013, 10:23
  3. Ответов: 3
    Последнее сообщение: 21.12.2012, 20:00
  4. Ответов: 4
    Последнее сообщение: 17.07.2012, 09:10
  5. Тег "input" недопустим внутри "form"
    от Nefesh в разделе HTML
    Ответов: 11
    Последнее сообщение: 24.09.2011, 11:19

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения