在div后面留下黑点

Question

I implemented Spectrum Color Picker . There is a slight change I want to make. The black dot that you can drag to select a color, the class name is sp-dragger . I want to edit the source file so that when you drag the black dot all the way to the side, (top, right, bottom and left side,) anything from the border of the class name sp-color and on, should hide the black dot.

(Image is from Adobe Illustrator)

I think the way to do this would be to create a div, or use an existing div, and make the z-index higher than the black dot.

JSFiddle

JavaScirpt Source

CSS Source

Answer 1

Look for this part in the css source:

.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;

   /* Then add this line */
   overflow: hidden;
}

So the content doesn't bleed outside its edge.