Search code examples
cssjquery-mobilemobilejquery-mobile-themeroller

How to remove the shadow effect after button clicked in theme roller


I know this could be a silly question. I have been trying to remove the shadow which comes after clicking any button in ThemeRoller for a while. There is no option given in the data theme roller to change the color or remove it.

Can anyone help me with that.

Thanks

Edit 1 Okay after dwelling into the css this is what worked for me

/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
    -webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
    -moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
    box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
} 

made the shadow to 0px instead of default 12px.

Note: you have to do it in the respective theme like mine was data-theme-c

Thanks to the people who shared there answers


Solution

  • Okay after dwelling into the css this is what worked for me

    /* Focus buttons and text inputs with div wrap */
    .ui-page-theme-c .ui-focus,
    html .ui-bar-c .ui-focus,
    html .ui-body-c .ui-focus,
    html body .ui-group-theme-c .ui-focus,
    html head + body .ui-btn-c.ui-focus,
    html head + body .ui-body-c.ui-focus {
        -webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
        -moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
        box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
    } 
    

    made the shadow to 0px instead of default 12px.

    Note: you have to do it in the respective theme like mine was data-theme-c

    Thanks to the people who shared there answers