Css link focus not working in mobile devices

Question

I am creating a WordPress chat bubble plugin. I am using pure css code to open and close floating action popup box.

I am using link focus css. It is working fine on Desktop but not working on mobile devices or responsive view.

function devsol_chat_buttons()
{
    wp_register_style('dvchat-styles', plugins_url('/css/dvchat.css',__FILE__ ));
    wp_enqueue_style('dvchat-styles');  
?>    
    <div class="devsol-chat">

    <a href="javascript:void(0);" class="float" id="menu-close">
    <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/close.svg'; ?>">     
    </a>

    <a href="javascript:void(0);" class="float" id="menu-share">
    <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/chat.svg'; ?>">
    </a>        

    <ul>
        <li><a href="mailto:hello@covers.pk" id="menu-email">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/email.svg'; ?>">
        </a></li>   
        <li><a href="tel:+923038518000" id="menu-call">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/call.svg'; ?>">
        </a></li>   
        <li><a href="https://m.me/Printed.Mobile.Covers" id="menu-facebook">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/facebook.svg'; ?>">
        </a></li>
        <li><a href="https://wa.me/9203038518000" id="menu-whatsapp">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/whatsapp.svg'; ?>">
        </a></li>
    </ul>
    </div>

<?php   
return;
}

.devsol-chat .float{
    position:fixed;
    width:50px;
    height:50px;
    bottom:30px;
    right:30px;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    z-index:1000;
}

.devsol-chat ul{
    position:fixed;
    right:30px;
    padding-bottom:20px;
    bottom:50px;
    z-index:100;
}

.devsol-chat ul:hover{
    visibility:visible!important;
    opacity:1!important;
}

.devsol-chat ul li {
    list-style:none;
    margin-bottom:10px;
}

.devsol-chat ul li a{
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
    width:50px;
    height:50px;
    display:block;
}

#menu-share {
    background-color: #000000;
    box-shadow: 2px 2px 3px #999;
}

#menu-share img {
    width: 30px;
    margin-top: 10px;
}

#menu-close {
    background-color: #000000;
    box-shadow: 2px 2px 3px #999;
}

#menu-close img {
    width: 15px;
    margin-top: 17px;
}

#menu-facebook {
    background-color: #0084ff;
}

#menu-facebook img {
    width: 30px;
    margin-top: 10px;
}

#menu-whatsapp {
    background-color: #4dc247;
}

#menu-whatsapp img {
    width: 30px;
    margin-top: 10px;
}

#menu-call {
    background-color: #f37b2b;
}

#menu-call img {
    width: 30px;
    margin-top: 10px;
}

#menu-email {
    background-color: #f37b2b;
}

#menu-email img {
    width: 30px;
    margin-top: 10px;
}

.my-float{
    font-size:24px;
    margin-top:18px;
}

a#menu-share i{
    animation: rotate-in 0.5s;
}

a#menu-share:hover > i{
    animation: rotate-out 0.5s;
}

a#menu-share + ul {
  visibility: hidden;
}

a#menu-share:focus + ul {
  visibility: visible;
  animation: scale-in 0.5s;
}

a#menu-share:focus::after {
  content: 'X';
  font-weight: bold;
  font-size: 16px;
  top: 10px;
  position: relative;
}

a#menu-share:focus {
    display: none;
}

I also noticed that:focus only works in firefox browser for desktop and mobile. Focus not working in chrome desktop and mobile browser. Please help

Answer 1

Have you tried:active instead of:focus?