How to remove the blue halo glow from jQuery Mobile input elements that receive focus

Question

I'm encountering the same problem as listed in:

JQuery Mobile: how to not display the button focus halo when a button is clicked?

However, I tried the accepted answer by "codaniel" which works great, EXCEPT for when you want the item in question to retain a regular drop shadow - just not that blue halo blur. When you apply the CSS rules shown in his answer to those selectors, it removes everything on focus - including the desired normal drop shadow. Any ideas how to keep the desired (black) drop shadow on focus but lose the blue halo glow?

Thanks in advance! Cole

Answer 1

Use the below CSS to override/remove the shadow.

Demo

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

This will remove shadow from all input elements. However, if you want, you can add it as a class to specific elements/input types. Assuming the class name is noshadow.

Update

I made a demo to show you exactly how to remove blue halo glow from different types of inputs. All input types are wrapped by a DIV which accommodates major classes. Thus, any custom class should be added to that div using .closest('div').

The below code removes blue shadow / adds .noshadow to input type=email only, leaving other inputs untouched.

$(document).on('focus', 'input', function () {
 if ($(this).hasClass('ui-input-text') && $(this).attr('type') == 'number') {
  $(this).closest('div').addClass('noshadow');
 }
});

I used ui-input-text to identify the input as all inputs have that class. However, it is different for input type=search as it has an additional class .ui-input-search and data-type=search unlike other inputs. So it requires different procedure to add custom class to it, this way.

$(document).on('focus', 'input', function () {
 if ($(this).closest('div').hasClass('ui-input-search')) { // or $(this).attr('data-type') == 'search'
  $(this).closest('div').addClass('noshadow');
 }
});

Answer 2

If you want to remove it go with Omar's answer.

If you want to have a shadow but of different color you need to change and override shadow color, like this:

.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: inset 0 0 3px      #555  , 0 0 9px         #555  !important;
    -webkit-box-shadow: inset 0 0 3px   #555  , 0 0 9px         #555  !important;
    box-shadow: inset 0 0 3px           #555  , 0 0 9px         #555  !important;
}
.ui-input-text.ui-focus,
.ui-input-search.ui-focus {
    -moz-box-shadow: 0 0 12px           #555 !important;
    -webkit-box-shadow: 0 0 12px        #555 !important;
    box-shadow: 0 0 12px                #555 !important;    
}

Working example: http://jsfiddle.net/Gajotres/ywraY/

Don't forget to use !important, this is the only way original CSS can be overridden. This CSS will cover every input element. You only need to find color that best suites you.

Answer 3

Just write down regular shadow instead of no shadow.

.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px 0px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px 0px;
}

Or use some other shadow of your choice.