I have added drop shadows to labels for checkboxs so that when they are checked the drop shadow appears. They work perfectly on chrome however when I tried them on safari on both my mac and iPhone the drop shadows are not appearing. I have tried using the -webkit-filter CSS but this has not had any effect.
I have included both the HTML and CSS below.
<li>
<input type="checkbox" id="dairy" name="lifestyle" value="dairy-">
<label for="dairy">
<img src="https://cdn.shopify.com/s/files/1/0433/2958/5306/files/Cheese_Icon.png?v=1611093331" class="choose--contents--img" alt="">
<p>Dairy</p>
</label>
</li>
label {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #5E7735;
background-color: white;
border-radius: 8px;
width: 117.5px;
height: 140px;
box-sizing: border-box;
cursor: pointer;
}
:checked + label {
filter: drop-shadow(6px 6px 0 #5E7735);
-webkit-filter: drop-shadow(6px 6px 0 #5E7735);
-moz-filter: drop-shadow(6px 6px 0 #5E7735);
-ms-filter: drop-shadow(6px 6px 0 #5E7735);
-o-filter: drop-shadow(6px 6px 0 #5E7735);
transition: filter 0.1s ease-in;
-webkit-transition: filter 0.1s ease-in;
}
They should look like this
But they look like this (the shadow is cut off)
As I was playing with this I think one solution could be to use a box shadow, and apply border-radius that is using vw, for proportionality.
Something like this:
.class {
box-shadow: 6px 6px 0 #5E7735;
border-radius: 5vw; /* Or whatever fits the corners of the image used) */
}
It's a workaround but hopefully it can help someone out there!