Question

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

Was it helpful?

Solution 2

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

OTHER TIPS

Well you could try the following styles:

button:active{
box-shadow: none !important;
}

If the issue isnt related to box-shadow, try outline.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top