Box-shadow disappears over input elements

Question

I tried to add box-shadow for a div while scrolling. I just went for a try and everything works fine except that the box-shadow is not applied over text-area or text-fields... And I'm using twitter-bootstrap Here is what i tried out...

 $('#target').scroll(function() {
  var scrollTop = $(this).scrollTop();
  if(scrollTop > 1) {
    if(!$(this).hasClass('scrolled')) {
      $(this).addClass('scrolled');
    }
  } else {
    $(this).removeClass('scrolled');
  }

});

http://jsfiddle.net/xVdYv/1/

Please suggest me how can i overcome this flaw...

Thanks in advance...

Answer 1

change your css in this way

.scrolled:before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    z-index: 1;
    width: 100%;
    height: 50px;   
    pointer-events: none;
    box-shadow: inset 0px 20px 25px -20px #000000;
}

this will apply the shadow in a positioned pseudoelement with a z-index : the final effect is the shadow overlapping the form controls

As alternative solution, you could simply use a linear gradient as a background of .scrolled:before

eg

.scrolled:before {
    ...
    background: linear-gradient(to bottom, rgba(50,50,50, .25) 0, 
                                           rgba(50,50,50, 0) 50px);
}

Answer 2

if u want shadow on textarea and input u need to tell the browser that also the input and textarea want a shadow

.scrolled,.scrolled input,.scrolled textarea{
box-shadow: inset 0px 20px 25px -20px #000000;
}

Answer 3

As Fabrizio said pretty much, pseudo elements would be the way to go to add this presentation.

I'd maybe opt for something like this: http://jsfiddle.net/xVdYv/6/

.scrolled {
 position: relative;
}

.scrolled:before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    z-index:10;
    width: 100%;
    height:1px;
    box-shadow: 0px 0px 5px #000000;
}

Not using an inset box shadow and just setting a 1px height means you can still interact with the form elements whilst the shadow is over it. Otherwise that 50px shadow will block pointer events.