Why isn't the background color displaying for the child text element during animation?

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">
elements in column 1, the text elements within the <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>

htmlcssflexboxcss-animations

Answer №1

Providing dimensions like width and height will ensure proper display (e.g., using width: fit-content if needed).

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it conceivable that Rails may be rendering HTML at a slower rate compared to static

When using a Rails layout, you can include HTML tags to render images like this: <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %> This will generate the following HTML code: <img alt="Sample App" class="round" src="/i ...

htmlruby-on-railsrubylayoutrendering

The function .val() is not a recognized method

hello everyone here is the section of my HTML code: <div class="radio"> <input type="radio" name="certain" id="oui" value="oui"/> <label for="oui"> oui </label> <br /> <input type="radio" name="certain" id=" ...

javascriptjqueryhtml

The single controller can now showcase various notification styles for operations such as insertion, updating, or error handling

I need to display notifications to the user based on three different scenarios using a controller. When data is successfully inserted When data is successfully updated In case of an error For each scenario, I want to show a different style of notificati ...

cssasp.net-mvctempdata

Break down the organization of CSS

While exploring a website, I came across this CSS code that sets the font family to "Open Sans," Helvetica, Arial, and sans-serif. However, I am having trouble understanding this structure. Any assistance would be greatly appreciated. Thank you in advanc ...

htmlcss

Steps for closing the menu by clicking on the link

My issue with the menu on the landing page is that it only closes when clicking the cross button. I want it to close when any link from the menu is clicked. I attempted to add code using querySelector, but it only worked for the home link and not the other ...

javascripthtmlcss

Tips for arranging images of varying heights on separate lines so they appear cohesive as a group

I've been working with masonry.js but I'm still not achieving the effect I want. Javascript:` var container = document.querySelector('#container'); var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item' ...

htmlcssimage

A guide on aligning a CSS item perfectly in the center using absolute positioning

I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...

htmlcsscss-position

"Improve text visibility on your website with Google PageSpeed's 'Ensure text remains visible' feature, potentially saving you

Click here for the image reference showing the 0ms potential saving message I'm having trouble with a warning in Google PageSpeed and I've tried everything. This is the code I'm using to define the font-family: @font-face { font-family: ...

htmlangularseofont-facepagespeed

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

csssasscompass-sassadobe-brackets

Include a floating element within a modal box

I am trying to display some cards within a Bootstrap modal form. Inside the modal, I want the cards to appear in two columns by using the "col-md-5" class. .mycard.col-md-5 card contents However, when I use the "col-md-5" class, it adds a property o ...

htmlcsstwitter-bootstrap-3frontend

What is the best way to iterate through my array and display each value within my button element?

I have a challenge where I'm trying to iterate over an array named topics. This array contains the names of various people. Within my loop, my goal is to extract each name and insert it into a button as text. When I use console.log within my loop, I ...

javascriptjqueryhtml

Can we dynamically add an identical DOM structure by clicking a button using jQuery?

I currently have ten text fields within a single div. I am interested in including another set of ten text fields with the same name, class, and id. Is there a way to recycle the existing DOM structure mentioned above, or will I need to generate and add t ...

javascriptjqueryhtmldomelement

After the initial iteration, the .length function ceases to function properly when

A validation method is set up to check the length of a user input field. It functions properly on the initial try, but does not update if I go back and modify the field. $("#user").blur(function () { if ($("#user").val().length < 3) { $("#userval ...

javascriptjquerycss

How do I navigate to a different page in Vue.js HTML based on user selection?

Here is my first attempt at writing HTML code: <div class="col-md-4" > <div class="form-group label-floating"> <label class="control-label">Select No</label> <select class="form-control" v-model="or" required=""> ...

javascriptjqueryhtmlvue.jsvue-component

What is the best way to create a miniaturized image of a webpage for sharing on Facebook?

I'm looking for a way to post a link to users' Facebook walls with a thumbnail image of their created page. The page is in HTML format and stored as a series of 'elements' in the database, each with its size, position, and content. Is i ...

phphtmlfacebookthumbnails

What is the appropriate method for passing parameters in PHP and how can you handle returned empty values

I'm looking to pass parameters in the action method because I am unable to do so via the header. <form name="mailinglist1" method="post" action="report1.php" > In this form, I'm using a download button to connect my report (HTML). ...

phphtmlcodeigniter

Cordova Geolocation now displaying incorrect latitude and longitude values as NAN

Recently starting out with javascript and Cordova, I decided to develop a basic GPS app in Visual Studio 2015. The goal was simple: get my current position by clicking on the "CURRENT POSITION" button. Testing it in Firefox yielded positive results. Howev ...

javascripthtmlwindowscordovageolocation

A cookie designed to store and retain the preferred CSS stylesheet choice

I'm looking to create a cookie that will store the preference for a specific CSS stylesheet. I currently have a function in place that allows me to switch between stylesheets: function swapStylesheet(sheet){ document.getElementById('pagestyl ...

javascripthtmlcss

Creating a customized display on a webpage using XML and XSL to generate unique

Looking to utilize my xml file for generating various xsl pages. <movies> <movie> <name>Shark tank</name> <movie> <movie> <name>Tank Shark</name> <movie> ...

htmlxmlxslthyperlink

Enhance your webpage design with stylish CSS formatting using Bulma cards

My HTML output is as follows: https://i.stack.imgur.com/aBdEF.jpg It seems that the footer is not matching up with the cards... The CSS component I am using looks like this: .card-equal-height { display: flex; flex-direction: column; height: 100%; ...

htmlcssangularbulmacard