Is there a way to make the ghost image for draggable elements in Chrome render on a transparent background, similar to how Firefox does it? I'm seeing that in Chrome (Chromium 45), the ghost image is displayed on a white background.
For Example: http://jsfiddle.net/c8p24q6y/
My webpage has a dark background color. When dragging list items in Chrome, the ghost image's white background clashes with my design. In contrast, Firefox displays the ghost image with a transparent background.
<html>
<head>
<style>
body{
background-color:black;
}
ul { list-style-type:none; }
li *{
display:inline-block;
border-radius:10px;
width:100px;
height:23px;
margin-right:8px;
cursor:move;
}
li :first-child{ background-color:red; }
li :last-child{ background-color:blue; }
</style>
<script>
window.onload = function(){
var dc = document.getElementById("drag_cont");
dc.ondragstart = function(e){
e.dataTransfer.setData("text/plain", "testing");
};
}
</script>
</head>
<body>
<ul id="drag_cont">
<li draggable="true">
<div></div><div></div>
</li>
<li draggable="true">
<div></div><div></div>
</li>
</ul>
</body>
</html>