input field pops over the inner shadow css-CodePudding

I have a simple box with overflow and would like to show that it is scrollable by adding a shadow on the bottom. It works, but the problem is that I have some input fields which pop over the shadow, which doesn't look nice. Setting z-index doesn't help and I don't know any other way to approach this. Here is a snippet to give you an idea of how it looks:

#box {
  width: 500px;
  height: 100px;
  box-shadow: 0px -6px 8px #888888 inset;
  overflow: auto;
}

<div id= "box">
  Some text<br>This text is so good<br>OMG this text is just epic<br>
  No way, more text?<br>Wow, this text is drivig me crazy<br>
  <input><br>
  More text here as well.
</div>

CodePudding user response：

To get the shadow on top of the content we can create a visual element that is layed out above content and has the shadow.

We can achieve that with a pseudo element, but because of the overflow attribute, the shadow scrolls with the content. To get around that, we can create an inner wrapper-element with the overflow and keep the shadow element outside.

Since the shadow element now lays on top of everything, we can't actually scroll or select the input element. pointer-events: none; fixes that:

#box {
  position: relative;
}
#box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0px -6px 8px #888888 inset;
}
.box-inner {
  width: 500px;
  height: 100px;
  overflow: auto;
}

<div id="box">
  <div >
    Some text<br>This text is so good<br>OMG this text is just epic<br>
    No way, more text?<br>Wow, this text is drivig me crazy<br>
    <input /><br>
    More text here as well.
  </div>
</div>