Does :focus work with specificity as :hover does? - html

Question

Here is my problem. I want the input-group-addon that holds an icon (search icon, calendar icon, etc) to inherit the hover, focus, and active states of its input field by specificity. I have it working for hover but for some reason specificity is ignoring the focus state. I thought it was a conflicting css directive in my code but I isolated the problem in CODEPEN and it does it there as well.
In summary, I want the input group addon border to change to yellow seamlessly with its input field when I focus on it (tab or click), as it does when I hover on it.
My HTML:
<div class="input-group controls">
<input type="text" class="form-control" placeholder="Search by Name" />
<span class="input-group-addon right search"></span>
</div>
My CSS (Use Chrome if possible. I didn't include here the corssbrowser stuff to make it simpler to read) Also, this is originally built on SCSS:
.mar40 {
margin: 40px auto;
}
.form-control {
border-width: 2px;
border-color: #8f8f8f;
-webkit-box-shadow: none;
box-shadow: none;
color: #bbbbbb;
-webkit-border-radius: 34px;
-moz-border-radius: 34px;
-ms-border-radius: 34px;
border-radius: 34px;
background: #211E1E;
}
.form-control:focus,
.form-control:hover {
border-color: rgba(248, 151, 29, 0.77);
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
transition: all 1s ease;
}
.form-control .input-group-addon {
background: #8f8f8f;
border-color: #555555;
border-width: 2px;
}
.controls .input-group-addon.right.search {
background: #30373e;
border: 2px solid #8f8f8f;
color: #bbbbbb;
border-left: none;
border-radius: 0px 20px 20px 0;
padding: 4px 10px;
min-width: 0;
}
.controls .input-group-addon.right.search:before {
content: "\f4a4";
font-family: 'Ionicons';
font-size: 16px;
}
.controls:focus .input-group-addon.right,
.controls:hover .input-group-addon.right,
.controls:active .input-group-addon.right {
border: 2px solid rgba(248, 151, 29, 0.77) !important;
border-left: none !important;
transition: all 1s ease;
}
.controls:focus .input-group-addon.right:before,
.controls:hover .input-group-addon.right:before,
.controls:active .input-group-addon.right:before {
color: rgba(248, 151, 29, 0.77);
transition: all 1s ease;
}
Desired effect illustration on hover/focus/active
This is what I am getting on focus
And the handy dandy CODEPEN
Thanks!

Answer 1

:focus applies for the input and not the parent container and so your selector group should be as follows. (Note the changed selector in the first line)
.form-control:focus + .input-group-addon.right,
.controls:hover .input-group-addon.right,
.controls:active .input-group-addon.right {
border: 2px solid rgba(248, 151, 29, 0.77) !important;
border-left: none !important;
transition: all 1s ease;
}
As far as I know, when you :hover the child you are also indirectly hovering on the parent and so the .controls:hover .input-group-addon.right also works when .form-control:hover is applicable. Thus both the .form-control and .input-group-addon.right get the border.
But when you focus on the .form-control, the focus selector applies only to the input and doesn't get applied to its container. Thus only the .form-control gets the border and not the .input-group-addon. So, the selector must be changed to style the .input-group-addon based on the input and not the container's focus.
CodePen Demo