Как правильно обратиться в CSS к внутреннему тегу иконки svg?

Question

[Никита Сальников]

<div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Wallet name" aria-label="Wallet-name" aria-describedby="wallet-name">
                    <svg class="account__icon" width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.4">
                        <path d="M7.31552 19.5374L7.89418 12.0545L22.619 8.28799V16.9551C22.619 17.8785 21.9869 18.6819 21.0894 18.899L9.77992 21.6355C8.45895 21.9551 7.21073 20.8924 7.31552 19.5374Z" fill="#252526" stroke="white" stroke-width="2"/>
                        <path d="M7 12.7895C7 12.2372 7.44772 11.7895 8 11.7895H23.0476C23.5999 11.7895 24.0476 12.2372 24.0476 12.7895V22.0526C24.0476 22.6049 23.5999 23.0526 23.0476 23.0526H8C7.44772 23.0526 7 22.6049 7 22.0526V12.7895Z" fill="white" stroke="white" stroke-width="2"/>
                        </g>
                        </svg>
                </div>

Здравствуйте, подскажите пожалуйста как правильно обратиться к тегу который находится внутри svg чтобы поменять его opacity через CSS. Нужно чтобы при нажатии на input менялся opacity. То есть .form-control:focus и дальше как обратиться к тегу? Пробовал .form-control:focus .account__icon g { opacity:1;} не помогает.

Comments

[Сергей Соколов]

менять будете opacity всей иконки же? Тогда зачем лезть внутрь — уберите полупрозрачность g и стилями рулите всей иконкой

[Ankhena]

1. Уберите opacity="0.4". Управляйте им из CSS.
2. Причем, для всей SVG, у неё же один g. Который и вовсе можно убрать.
3. В инпуте нет никаких SVG и её частей, поэтому дочерний селектор не сработает, вам нужен соседний.
.form-control:focus + .account__icon { opacity:1;}

Answer 1

[Danny Arty]

У вас один мелкий недочет: вы обращаетесь к svg, будто это дочерний элемент инпута с классом form-control. Синтаксис должен быть такой:

.form-control:focus + .account__icon g {
  opacity: 1;
}

Comments

[Никита Сальников]

Премного благодарен. Помогло!!