title: Disable overflow scrolling on webkit-based browsers
body: <p>I'm using <code>::after</code> to create shadow to decorate a element (say <code>A</code>). </p>
  
  <p>In order to do this, I set the <code>overflow: hidden</code> for <code>A</code> to hide undesired part of the shadow. </p>
  
  <p>It looks perfect, but there is a problem after I added a <code>input</code> box to <code>A</code>. If I click in the <code>input</code> and drag, the <code>A</code> layer will scroll, and the rest part of shadow will show up.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/mPVPU/" rel="nofollow">demo</a> and the simplified code:</p>
  
  <pre><code>&lt;div style="width: 200px; height: 30px; overflow: hidden; border: 1px black dotted;"&gt;
    &lt;div style="height: 30px; border-bottom: red 10px solid;"&gt;
      &lt;input style="width: 200px" placeholder="click and drag me downward" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm looking for a pure CSS solution to fix this problem. Thanks ahead.</p>