My search boxes are arranged in a grid layout with the use of the display: grid property. When I click on or focus on the
<input type="text"><span> tag with class names placeholder2, placeholder4, and placeholder6 fail to display their background color even though it is set to #181212.
I have checked that none of the parent elements are preventing the background from showing up. Yet, it still doesn't work and I'm unsure why.
I require the background color to be visible for better readability of this placeholder text after the animation completes.
The CSS section responsible for this behavior is as follows:
.item1:focus~.placeholder2,
.item3:focus~.placeholder4,
.item5:focus~.placeholder6 {
background-color: #181212;
top: -10px;
right: -8px;
font-size: 16px;
font-weight: normal;
color: #e4a8a8;
opacity: 1;
}
The complete HTML + CSS code snippet can be found here:
(or alternatively, you can visit: https://jsfiddle.net/jqzzy/dezq1m3t/13/)
.grid-container {
display: grid;
width: auto;
height: auto;
gap: 12px 6px;
padding: 0px;
grid-template-columns: 200px 60px;
grid-template-rows:
40px 40px 40px;
}
.grid-item-input {
background-color: #313131;
left: 10px;
font-size: 11pt;
top: 5px;
padding: 0px 10px;
padding-top: 3px;
border: solid 1px #494949;
border-radius: 7px;
}
.grid-item-BT {
position: relative;
top: 1x;
background: linear-gradient(0deg, #303030, transparent) #505050;
color: #acacac;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 14px;
border: 0px solid #666666;
border-radius: 9px;
}
.item1 {
grid-column: 1;
grid-row: 1;
}
.item2 {
grid-column: 2;
grid-row: 1;
}
.item3 {
grid-column: 1;
grid-row: 2;
}
.item4 {
grid-column: 2;
grid-row: 2;
}
.item5 {
grid-column: 1;
grid-row: 3;
}
.item6 {
grid-column: 2;
grid-row: 3;
}
/*///////////// HIGHLIGHT BOX ANIMATION /////////////// */
span input[type="text"] {
border: 1px solid #5c5c5c;
font-size: 11pt;
top: 5px;
padding: 0px 10px;
padding-top: 3px;
-webkit-transition: all .4s;
-webkit-transform: translate(0px, 0);
-webkit-transition: 0.25s ease-out;
animation: 0.25s ease-out 0s 1 scaleBtn;
}
span input[type="text"]:focus {
background-color: #414141;
color: #e4e4e4;
outline: 0;
font-size: 11pt;
-webkit-box-shadow: inset 0 1px 1px #00000013, 0 0 8px #e9666699;
box-shadow: inset 0 1px 1px #00000013, 0 0 8px rgba(233, 102, 102, 0.6);
}
span input:focus {
border-color: #e63f3f;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px #00000013, 0 0 8px #e9666699;
box-shadow: inset 0 1px 1px #00000013, 0 0 8px #e9666699;
}
/*///////////// PLACEHOLDER TEXT ANIMATION /////////////// */
.placeholder1,
.placeholder3,
.placeholder5{
position: relative;
width: 0px;
top: 7px;
left: 7px;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
padding: 0px 0px;
color: grey;
-webkit-transition: 0.25s;
-webkit-transform: translate(0px, 0);
pointer-events: none;
white-space: nowrap;
opacity: 1;
}
.item1:focus~.placeholder1,
.item3:focus~.placeholder3,
.item5:focus~.placeholder5{
top: -10px;
right: -8px;
font-size: 16px;
font-weight: normal;
color: #e4a8a8;
opacity: 0;
}
.placeholder2,
.placeholder4,
.placeholder6 {
position: relative;
width: 0px;
top: 7px;
left: 7px;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
padding: 0px 0px;
pointer-events: none;
white-space: nowrap;
opacity: 0;
-webkit-transition: 0.25s;
-webkit-transform: translate(0px, 0);
}
.item1:focus~.placeholder2,
.item3:focus~.placeholder4,
.item5:focus~.placeholder6 {
background-color: #181212;
top: -10px;
right: -8px;
font-size: 16px;
font-weight: normal;
color: #e4a8a8;
opacity: 1;
}
.input:not(:focus) {
color: #9e595900;
} <span>
<div class="grid-container">
<input class="grid-item-input item1 input" type="text" id="linkKBs" maxlength="" value="" autocomplete="off" autofocus>
<span class="item1 placeholder1">My Guinea Pigs:</span>
<span class="item1 placeholder2">Search for Guinea Pig:</span>
<button class="grid-item-BT item2" tabindex="-1">SEARCH</button>
<input class="grid-item-input item3 input" type="text" id="linkInc" maxlength="" value="" autocomplete="off">
<span class="item3 placeholder3">My Bananas:</span>
<span class="item3 placeholder4">Search for Banana:</span>
<button class="grid-item-BT item4" tabindex="-1">SEARCH</button>
<input class="grid-item-input item5 input" type="text" id="linkAAChan" maxlength="" value="" autocomplete="off">
<span class="item5 placeholder5">My Comic Books:</span>
<span class="item5 placeholder6">Search Comic Book:</span>
<button class="grid-item-BT item6" tabindex="-1">SEARCH</button>
</div>
</span>