Inset Box shadow over the inner div content

Question

I am trying to implement inset box-shadow with div #content, everything is okay if the #content not use background, but if I put background-color in #content, the #content over the box shadow, how to fix that?

Expected Result: Inset Box Shadow Still Over The Div Content with background

Here is my code:

#container {
  -webkit-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  overflow-y: scroll;
  height: 200px;
  width: 300px;
}

#content {
  background: #fff;
  width: 260px;
  margin-left: 10px;
}

<div id="container" class="some_class">
  <div id="content" class="">
    Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim
    aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum
    at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam
    dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget
    sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien
    quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere metus, ornare pede montes, morbi
    urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla, purus enim amet, nascetur faucibus,
    adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim ipsum, nostra leo vestibulum quis nibh
    arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
  </div>
</div>

Possible duplicate of [css box shadow + transparent background images = intuitive breakdown](https://stackoverflow.com/questions/9569984/css-box-shadow-transparent-background-images-intuitive-breakdown) — Persijn, Mar 18 '18 at 06:58
its not duplicate, i have check that question... its different problem... — Abu Ayyub, Mar 18 '18 at 07:06

Bhuwan · Accepted Answer · 2018-03-18T11:17:40.987

Try to use z-index:-1 with position:relative to the inner div #content

#container {
  -webkit-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  overflow-y: scroll;
  height: 200px;
  width: 300px;
  font: 13px Verdana;
}

#content {
  background: red;
  color: #fff;
  width: 260px;
  margin-left: 10px;
  position: relative;
  z-index: -1;
}

<div id="container" class="some_class">
  <div id="content" class="">
    Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim
    aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum
    at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam
    dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget
    sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien
    quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere metus, ornare pede montes, morbi
    urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla, purus enim amet, nascetur faucibus,
    adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim ipsum, nostra leo vestibulum quis nibh
    arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
  </div>
</div>

Well above solution is for just visual...Inside #content click or hover will not work...If you want to event work you will need to put some space from top and bottom like below

#container {
  box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  height: 200px;
  width: 300px;
  font: 13px Verdana;
  padding-top: 15px
}

.scroll {
  height: calc(100% - 15px);
  overflow-y: scroll;
}

#content {
  background: red;
  color: #fff;
  width: 260px;
  margin-left: 10px;
}

<div id="container" class="some_class">
  <div class="scroll">
    <div id="content" class="">
      <input type="text" /> Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius
      eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates
      dui eros libero. Etiam vestibulum at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae
      faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra
      ut. Pellentesque vehicula. Eget sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo
      scelerisque libero massa. Sapien quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere
      metus, ornare pede montes, morbi urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla,
      purus enim amet, nascetur faucibus, adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim
      ipsum, nostra leo vestibulum quis nibh arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
    </div>
  </div>
</div>

Other problem when i put form inside the div content, that cannot click... how to fix that? — Abu Ayyub, Mar 18 '18 at 08:53
@AbuAyyub I think its not possible with solution1...I have added another solution with some changes..hope it will help... — Bhuwan, Mar 18 '18 at 11:19

Inset Box shadow over the inner div content

1 Answers1