I have a carret in a drop down menu that works correctly in all browsers except Microsoft Edge. In Microsoft Edge is the caret split in two parts with a black line in the middle. I am attaching screenshot and css declaration.
.caret {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
This should work across browsers:
HTML:
<span class="caret"></span>
CSS:
.caret {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid red;
border: none\9;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With