Search code examples
jquery-mobilejqmobi

Removing select effect from jQm textbox

I have created two text boxes. Aenter image description here light Gray colour shadow is showing above the textbox. I am unable to remove the effect. I have used jQm CSS file in my project. Above is my screen shot.

Solution

  • The shadow effect upon focusing on an input is from the ui-focus css class

    -webkit-box-shadow:0 0 12px #38c;
-moz-box-shadow:0 0 12px #38c;
box-shadow:0 0 12px #38c

    If you want to get rid of the shadow, just override the class:

    .ui-focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

    If you don't like the little inset shadow when the text box is not focused, you can override the ui-shadow-inset class:

    .ui-shadow-inset{
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

    DEMO