Search code examples
javascriptjqueryhtmlcssspectrumjs

Make black dot behind around div

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.

enter image description here

(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

Solution

  • 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.