How to properly refer to the inner tag of the svg icon in CSS?

Question

css

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

Hello, please tell me how to correctly access the tag that is inside the svg in order to change its opacity through CSS. It is necessary that when you click on the input, the opacity changes. That is, .form-control:focus and then how to refer to the tag? Tried .form-control:focus .account__icon g { opacity:1;} doesn't help.

Answer 1

You have one minor flaw: you are accessing the svg as if it were a child of an input with the class form-control . The syntax should be like this:

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