CODEWITHSUNDEEP
htmlcss
LOTUSMS
LOTUSMS

Reputation: 10290

Does :focus work with specificity as :hover does?

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 enter image description here

This is what I am getting on focus
enter image description here

And the handy dandy CODEPEN

Thanks!

Upvotes: 1

Views: 521

Answers (1)

Harry
Harry

Reputation: 89780

: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

Upvotes: 2

Related Questions