box-shadow on top of children

Question

How do I get an inset CSS3 box-shadow to render on top of its children elements?

Problem:

HTML:

<div id="chatroom">     <div class="chatmessage"><b>User 1:</b>Test</div>     <div class="chatmessage"><b>User 2:</b>Test</div>     <div class="chatmessage"><b>User 1:</b>Test</div>     <div class="chatmessage"><b>User 2:</b>Test</div> </div> 

CSS:

#chatroom{     border: 1px solid #CCC;     height: 135px;     font-size: 0.75em;     line-height: 1.2em;     overflow: auto;     -moz-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);     -webkit-box-shadow: inset 0 0px 4px rgba(0,0,0,.55); } .chatmessage{     padding: 4px 2px; } .chatmessage b{     margin-right: 2px; } .chatmessage:nth-child(2n) {     background: #EEE; } 

Answer 1

To avoid the use of an additional element, you can use css pseudo-elements. Try this demo.

#chatroom {     position: relative; }  #chatroom:before {     content: "";      /* Expand element */     position: absolute;     left: 0px;     top: 0px;     right: 0px;     bottom: 0px;      -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.55);     -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.55);     box-shadow: inset 0 0 8px rgba(0,0,0,.55);      /* Disable click events */     pointer-events: none; } 

Basically this css creates that additional element for you. Notice the pointer-events:none to allow click events to pass through this element.

Keep in mind that pointer-events:none doesn't work well on some mobile devices regarding touch scrolling (clicking/taping works well). I ended up not using inset shadows at all because of this.