Background-color for child text element on animation is not showing. Why?-CodePudding

I've got this series of search boxes set with display: grid. Column 1 contains <input type="text"> elements that when clicked / set to focus, the text elements within <span> tag with class placeholder2, placeholder4, and placeholder6 do not get their background-color although I set it to #181212.

I made sure all parent elements are not disabling the background. But still, it is not working not sure why.

I'd like that background color in order for a clear reading of this pseudo placeholder text after the animation is done.

The section of CSS code is this:

.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 full HTML CSS snippet:
(or if you prefer: 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 >

          <input  type="text" id="linkKBs" maxlength="" value="" autocomplete="off" autofocus>
          <span >My Guinea Pigs:</span>
          <span >Search for Guinea Pig:</span>
          <button  tabindex="-1">SEARCH</button>

          <input  type="text" id="linkInc" maxlength="" value="" autocomplete="off">
          <span >My Bananas:</span>
          <span >Search for Banana:</span>
          <button  tabindex="-1">SEARCH</button>

          <input  type="text" id="linkAAChan" maxlength="" value="" autocomplete="off">
          <span >My Comic Books:</span>
          <span >Search Comic Book:</span>
          <button  tabindex="-1">SEARCH</button>

        </div>

    </span>

CodePudding user response：

If you give them some width and height it will show (width: fit-content for example if that's what you need)

.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);
  width: fit-content;
  height: fit-content;
}

.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 >

          <input  type="text" id="linkKBs" maxlength="" value="" autocomplete="off" autofocus>
          <span >My Guinea Pigs:</span>
<span >Search for Guinea Pig:</span>
<button  tabindex="-1">SEARCH</button>

<input  type="text" id="linkInc" maxlength="" value="" autocomplete="off">
<span >My Bananas:</span>
<span >Search for Banana:</span>
<button  tabindex="-1">SEARCH</button>

<input  type="text" id="linkAAChan" maxlength="" value="" autocomplete="off">
<span >My Comic Books:</span>
<span >Search Comic Book:</span>
<button  tabindex="-1">SEARCH</button>

</div>

</span>