Untitled
.dropdown-option { cursor: pointer; font-family: var(--f-guads); font-size: 16px; padding: 10px 10px 10px 30px; /* Add padding to make space for the tick mark */ position: relative; /* Make the option relative for absolute positioning of tick mark */ } .dropdown-option::before { content: "✓"; /* The tick mark */ color: #a95228; /* Set the color of the tick mark */ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: none; /* Hide by default */ } /* Target Safari and Apple devices */ @media not all and (min-resolution: 0.001dpcm) and (min-width: 0px) { @supports (-webkit-appearance:none) { .dropdown-option::before { display: block; /* Show tick mark on Safari */ } } } /* Target Android devices */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .dropdown-option::before { display: block; /* Show tick mark on Android */ } } /* Specific iPhone styles */ @media only screen and (max-device-width: 480px) and (orientation: portrait) { .dropdown-option::before { display: block; /* Show tick mark on iPhones */ } }
Leave a Comment