My code can be found at this link: https://jsfiddle.net/walshgiarrusso/dmp4c5f3/5/
Code Snippet in HTML
<body onload="resize(); resizeEnd();">
<div style="margin: 0% 13.85%; width 72.3%; border-bottom:1px solid gray;"><spanstyle="visibility:hidden"></span></div>
<div id="sifterWrapper">
<div id="sortTools">
<div id="searchBar">
<input type="text" id="searchBarInput" onkeyup="searchFunction()" placeholder="Search by Title" /></div>
<div id="typeSelector">
<button id="typeSelectorButton" onclick="dropdownFunction()">
Select Type ▾
</button>
</div>
<div id="dateSelector">
<p>From:<span style="width:0.25vw; visibility:hidden;">.</span></p>
<input type="text" required maxlength="2" placeholder="Month" class="dateSelectorInput" onclick="fakeFocusWithin()" oninput="resize()" />
<p>/</p>
<input type="text" required maxlength="2" placeholder="Day" class="dateSelectorInput" onclick="fakeFocusWithin()" oninput="resize()" />
<p>/</p>
<input type="text" required maxlength="4" placeholder="Year" class="dateSelectorInput" onclick="fakeFocusWithin()" oninput="resize()" />
<p><span style="width:0.5vw; visibility:hidden;">.</span>To:<span style="width:0.25vw; visibility:hidden;">.</span></p>
<input type="text" required maxlength="2" placeholder="Month" class="dateSelectorInput" onclick="fakeFocusWithin()" oninput="resize()" />
<p>/</p>
<input type="text" required maxlength="2" placeholder="Day" class="dateSelectorInput" onclick="fakeFocusWithin()" oninput="resize()" />
<p>/</p>
<input type="text" required maxlength="4" placeholder="Year" class="dateSelectorInputEnd" onclick="fakeFocusWithin()" oninput="resizeEnd()" />
</div>
</div>
</div>
</body>
CSS Section
#sifterWrapper {
/*SETUP*/
display:flex;
align-items:center;
margin: 0% 13.85%;
width: 72.3%;
border-bottom: 1px solid gray;
overflow: hidden;
/*VISUAL*/
font-size:1.4vw;
/*ANIMATION*/
transition:0.3s;
}
#sifterWrapper div{
/*SETUP*/
padding-bottom:.2%;
}
#sortTools {
/*SETUP*/
margin: 0 1vw;
display: flex;
align-items: baseline;
width:100%;
flex-flow: row nowrap;
justify-content: space-around;
/*VISUAL*/
font-family: inherit;
font-size: inherit;
}
#searchBar {
/*SETUP*/
margin: 0;
height: 3vw;
}
#searchBarInput {
/*SETUP*/
height: 3vw;
padding: 0;
border: 0;
outline: 0;
/*VISUAL*/
font-family: inherit;
font-size: inherit;
background: linear-gradient(to right, #cccccc, #cccccc 33.333333%, #f2f2f2 33.333334%, #f2f2f2 66.66666%, white 66.666667%);
background-size: 300% 200%;
background-position: right bottom;
border-left: 0 solid gray;
/*ANIMATION*/
transition: 0.3s;
}
#searchBarInput:hover {
/*VISUAL*/
padding-left:.5vw;
background-position: 50% bottom;
border-left: .4vw solid gray;
margin-right: -.9vw;
}
#searchBarInput:focus {
/*VISUAL*/
padding-left: .5vw;
background-position: left bottom;
border-left: .4vw solid gray;
margin-right: -.9vw;
}
#typeSelector {
/*SETUP*/
margin: 0;
padding:0;
height: 3vw;
/*VISUAL*/
font-family: inherit;
...
... (The rest of the content remains unchanged)
I encountered some issues while trying to resolve an error in my code which resulted in it being a bit scrambled. My main aim is to achieve seamless hover and focus effects that cover the entire area between the two lower borders.
The anticipated outcome should look like what's described above.
However, despite numerous attempts, I am unable to eliminate the spaces appearing in the fiddle.
Here are the troubleshooting steps I took:
- Adjusting the heights of the elements and linear gradient backgrounds.
- Experimenting with the display property of several elements.
- Tweaking the overflow of the parent div to compress it.
- Exploring pixel-rounded errors as a potential cause for the gaps.
- Since many of my elements scale according to viewport width, the gaps only manifest on specific VW widths, especially on smaller screens.