How to Remove the Blue Halo Glow from Jquery Mobile Input Elements That Receive Focus

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

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');
 }
});

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

You can override the default css instead of hacking up the source. Just make sure your css file is after the JQM one.

.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none ;
}

jQuery Mobile: Blue focus halo gets clipped when placing controls inside ui-grid

You just need to add a little padding:

li .ui-block-a, li .ui-block-b  {
    padding-right: 4px;
    padding-left: 4px;
}

Also, to keep things aligned, I have put your first list item in a ui-grid-solo with the same padding.

Here is your updated fiddle: http://jsfiddle.net/ezanker/N8ZUt/4/

jQuery mobile - how do I get rid of the blue highlight on the Home button

In jQuery Mobile the class added to buttons just pressed is: ui-btn-active. Here is a link to the documentation that talks about this class (although it doesn't say much): http://jquerymobile.com/demos/1.0b2/docs/toolbars/docs-navbar.html

Not sure if this is what you needed but I figured it might help. I'd recommend using FireBug or some such DOM Inspection tool to view the button in real-time.

Trying to hide pseudo element on input focus through ~

You can't do that with parent focus to control pseudo element, cause button and input both trigger focus on parent, you can't approve one and disapprove another. Instead, you can wrap input to do that.

label::before{
  content: 'default';
}

label:focus-within::before{
  display: none;
}

<div class="parent">
  <label>
     <input type="text">
  </label>
  <button>awd</button>
</div>

jquery mobile input types

Since you are using jquery mobile you can use jquery to setup a click handler for the button:

$('#button_id').live('click', function() {
    $('#result').val('Set Value Here');
});

If you are using onClick="[Javascript Code]" you should change to a click handler like the above example or change the href attribute of your link to:

href="javascript:[Javascript Code];"

Because Jquery Mobile does not keep onclick when it styles your button.

To learn about Jquery Mobile CSS I recommend using FireBug for Firefox or something similar that will show you DOM elements after they have been rendered by JQuery Mobile. Jquery Mobile takes your links with data-role="button" and turns it into several span tags.

For example:

<a href="#some_link" data-role="button" data-theme="a" data-inline="true">Some Link Text</a>

Turns into:

<a class="ui-btn ui-btn-up-a ui-btn-inline ui-btn-corner-all ui-shadow" data-inline="true" data-theme="a" data-role="button" href="#some_link">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Some Link Text</span>
</span>
</a>

Remove Safari/Chrome textinput/textarea glow

Edit (11 years later): Don't do this unless you're going to provide a fallback to indicate which element is active. Otherwise, this harms accessibility as it essentially removes the indication showing which element in a document has focus. Imagine being a keyboard user and not really knowing what element you can interact with. Let accessibility trump aesthetics here.

textarea, select, input, button { outline: none; }

Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.

You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Change shadow color on failed validation jquerymobile

Worked like a charm, thanks to @Omar

script

function StyleInvalidControl(control) {
    $(control).closest('div').addClass("invalidControl");

    setTimeout(function () {
        $(control).closest('div').removeClass('invalidControl');
    }, 3000);
}

style

.invalidControl {
     -moz-box-shadow: inset 0px 0px 3px #99200F /*{global-active-background-color}*/, 0px 0px 9px #99200F/*{global-active-background-color}*/ !important;
     -webkit-box-shadow: inset 0px 0px 3px #99200F /*{global-active-background-color}*/, 0px 0px 9px #99200F /*{global-active-background-color}*/ !important;
     box-shadow: inset 0px 0px 3px #99200F /*{global-active-background-color}*/, 0px 0px 9px #99200F /*{global-active-background-color}*/ !important;
}

---

Related Topics