It seems that I am encountering an issue when trying to select the div elements within a container that has a defined shadow using pseudo elements ::before OR ::after. Once the shadow is applied, the div elements become unselectable.
Please refer to the codepen example at "http://codepen.io/smkudale/pen/lvFCt" for better understanding of the issue.
I have attempted to use Z-index=-1 as a potential solution, but unfortunately, it did not work either.
If anyone has any suggestions or solutions to this problem, your input would be greatly appreciated.
Below you can find the HTML and CSS code used:
<body>
<div class="content">
<a class="shadow">
<div class= "b1"></a>
</div>
<a href="www.google.com">
<div class= "b2">
</div></a>
<div class= "b3">
</div>
<div class= "b4">
</div>
<div class= "b5">
</div>
<div class= "b6">
</div>
<div class= "b7">
</div>
<div class= "b8">
</div>
<div class= "b9">
</div>
<div class= "b10">
</div>
<div class= "b11">
</div>
<div class= "b12">
</div>
</a>
</div>
</body>
CSS:
.content
{
width:500px;
height:500px;
border-radius:500px;
border:1px solid red;
background:#ddd;
margin:0 auto;
position:relative;
overflow:hidden;
}
.shadow
{
display:block;
position:relative;
}
.shadow::before
{
display:block;
content:'';
position:absolute;
width:500px;
height:500px;
border-radius:500px;
-moz-box-shadow:inset 0px 0px 9px 9px rgba(0,0,0,0.3);
-webkit-box-shadow:inset 0px 0px 9px 9px rgba(0,0,0,0.3);
box-shadow:inset 0px 0px 9px 9px rgba(0,0,0,0.3);
overflow:hidden;
z-index:0
}
.b1
{
width:125px;
height:125px;
background:green;
margin:5px 5px 5px 5px;
display:inline-block;
float:left;
}