Menu
I focus in the input field and need to change the color of an icon and border-bottom of that class. How do I do it in Sass? I have already tried:
input
+ .input-group-addon // this is icon class
&:focus
border-bottom: solid 2px #004eff
However it does nothing. Could you please help me? This is what HTML looks like.
<div class="form-group" class="col-md-offset-1 col-xl-offset-1 focus-icon">
<div class="input-group">
<div class="input-group-addon man-icon"></div>
<input type="email" placeholder="Логин" required>
</div>
</div>
493
Definition and Usage. The :focus selector is used to select the element that has focus. Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.
:focus is a pseudo-class used to select and style elements, usually links and form elements, that have been focused by the user, either by "tabbing" using the keyboard or by clicking. Form elements, such as <input> , <button> , and <textarea> can receive focus either by tabbing using the keyboard or by clicking.
The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.
The parent selector, & , is a special selector invented by Sass that's used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
Try this. EDIT: I had missed a . when i pasted the answer.
.input-group
input
&:focus
& + .input-group-addon
border-bottom: solid 2px #004eff
Here you can see the SASS generated CSS in action. NOTE: The position in the DOM for "the icon" has been moved.
.input-group input:focus+.input-group-addon {
border-bottom: solid 2px #004eff;
}<div class="form-group" class="col-md-offset-1 col-xl-offset-1 focus-icon">
<div class="input-group">
<input type="email" placeholder="Логин" required>
<div class="input-group-addon man-icon"></div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With