Dealing with a specific style of search called macstyle can be quite convenient, but it becomes frustrating when combined with a dropdown menu. The issue arises when the search is in focus and then the dropdown menu is clicked, causing the transition to shift away from the mouse pointer.
.mac-style {
width: 100px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.mac-style:focus{
width: 260px;
}
I understand that I can use :hover for elements nearby + or in between ~, but is there a way to specify the expansion of the search bar whenever anything on the navbar is focused? And have it narrow down only when an element outside the navbar is focused elsewhere on the page?