影片上子文本元素的背景顏色未顯示。為什么？-有解無憂

我已經設定了這一系列的搜索框display: grid。第 1 列包含<input type="text">單擊/設定為焦點時的元素，<span>標簽內的文本元素帶有 class placeholder2, placeholder4，并且placeholder6沒有得到它們，background-color盡管我將它設定為#181212.

我確保所有父元素都沒有禁用背景。但是，它仍然不作業，不知道為什么。

我想要那種背景顏色，以便在影片完成后清楚地閱讀這個偽占位符文本。

CSS代碼部分是這樣的：

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

完整的 HTML CSS 片段：（
或者如果您愿意：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>

uj5u.com熱心網友回復：

如果你給他們一些寬度和高度，它會顯示（寬度：適合內容，例如，如果你需要的話）

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527398.html

標籤：htmlcss弹性盒CSS动画

上一篇：html將影像的框模型約束到它所覆寫的區域

下一篇：為什么我的游標和我的畫線在不同的邊？