Home > Software engineering >  How to have buttons appear on the screen?
How to have buttons appear on the screen?

Time：12-05

In the code I want all the squares to be a single color.

Allowing me to still change the colors of individual squares if I want to.

But after I did that, the buttons disappeared from the screen.

To be able to have all the squares/boxes be a different color.

I used this: https://jsfiddle.net/kwqh6zdn/

Doing so has the effect of hiding all the buttons though.

 .channel-browser__channel-grid-item::after {
  content: "";  
  position: absolute;
  inset: 0;
  background-color: pink;
}

How would this be fixed in the code so that, I am able to have all the squares be a certain color, while also being able to see the play buttons on the screen?

  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>


 .channel-browser__channel-grid-item::after {
  content: "";  
  position: absolute;
  inset: 0;
  background-color: pink;
}
 
.cover {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.cover::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
 border-left: 27px solid blue;
  transform: translateX(4px);
}

.channel-browser__channel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 
}

.channel-browser__channel-grid-item {
  position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item {
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image,
.horizontal-content-browser__content-item .responsive-image-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #1a1a1a;
  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.box-color-red::after {
  background: red;
  border-radius: 4px;
}

.box-color-blue {
  background: blue;
}

.box-color-yellow {
  background: yellow;
}

.box-color-green {
  background: green;
}
<div >
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
</div>

CodePudding user response：

This can be achieved with the addition of:

.channel-browser__channel-grid-item::after {
  z-index: -1;
}

Though if we're manipulating layers then it's often useful to style the parent with:

.channel-browser__channel-grid-item::after {
  isolation: isolate;
}

This is in order to prevent layers "leaking" out of the parent element and interfering with other contents and their z-index specified layers:

/* styling the parent of the pseudo-element in order to have each
   element be its own stacking context, and to isolate the various
   layers within that element: */
.channel-browser__channel-grid-item {
  isolation: isolate;
}

.channel-browser__channel-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: pink;
  /* positioning the pseudo-element behind the content of
     its parent element: */
  z-index: -1;
}

.cover {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.cover::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.channel-browser__channel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.channel-browser__channel-grid-item {
  position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item {
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image,
.horizontal-content-browser__content-item .responsive-image-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #1a1a1a;
  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.box-color-red::after {
  background: red;
  border-radius: 4px;
}

.box-color-blue {
  background: blue;
}

.box-color-yellow {
  background: yellow;
}

.box-color-green {
  background: green;
}
<div >
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div >
    <button  type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
</div>

JS Fiddle demo.

References:

Page link：https//www.codepudding.com/Softwareengineering/631991.html

Prev:How can I identify a common character in 2 Strings in Excel?
Next:Filtering of react native array not working/displaying
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding