'How do i apply css in Safari browser to show background color and hover effect of this <li>box

i can not figure out how to address this issue with safari browser. Note the images attached. One Chrome, shows box with background color and there is also a hover effect, that works. (works in FF and IE as well), Nothing works in Safari. no hover, background just white, so you can't see the text. Here is the code of that box. I am using safari's version of chrome dev tools to test different css, but I can't get that background within the box to change and no hover is working. Any suggestions on how to attack this problem would be greatly appreciated.

<ul>
<li class="acet-sum-item--clear"><a href="/applies/apples-tie-back-comments">
“Clear Filters”
::after
</a>
</li>
    .acet-sum-item--clear a {  
color: #fff;
    display: inline-block;
    text-align: center;
    border-radius: .15rem;
    background-color: #999;
    font-size: .65rem;
    padding: 0 1.5em;
    line-height: 1.3rem;
    font-weight: 400;
    border: none;
    margin: 0 .4rem 1rem .5rem;
    -webkit-appearance: button;
    cursor: pointer;
    margin-left: 0;
}

.acet-sum-item--clear a:hover    {
cursor: pointer;
    color: #fff;
    background-color: #20558a;
    text-decoration: none;
    border: none;
}

Screenshot from Chrome vs Safari

enter image description here

csssafari


Solution 1:[1]

This ended up being a -webkit issue. It was set to something - can't remember what, but I added code targeting safari and then set it to none. viola - the color and hover effect work.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user1176783

Related Questions