Изменить цвет "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
Предварительно, спасибо!