I hate jQuery Mobile blue halo outline effect and so should you, otherwise you would not be here. There are several solutions to this problem and I will name few of them.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Solution 1 – JavaScript

 
<input type="text" value="text" class="nohalo"/>
<p>Shadow removed - search input</p>
<input type="search" placeholder="Search.." value=""  class="nohalo"/>
<p>Shadow removed - number input</p>
<input type="number" value="12345"  class="nohalo"/>
<input type="password" value="foo"  class="nohalo"/>
<input type="email" value="email@me.net"  class="nohalo"/>
<input type="date"  class="nohalo"/>
 
$(document).on('focus', 'input', function () {
    if ($(this).hasClass('nohalo')) {
        $(this).closest('div').addClass('noshadow');
    }
});
 
.ui-focus {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}
 
This is a JavaScript solution which requires a custom class set to every input box we want to change, name it any way you want. Use this solution if you only want to target a certain type of elements.
 
Working Plunker example can be found here:
 
Demo
 
Embedded example:
 
 

Solution 2 – Pure CSS solution

 
.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
 
This is an all around solution, it will completely remove this feature from jQuery Mobile. !important keyword is necessary, it will not work without it.
 
Working Plunker example can be found here:
 
Demo
 
Embedded example:
 
 

Solution 3 – Replace blue halo with other color

 
.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;    
}
 
Use this solution if you still want to use a halo effect but blue color is not working for you.
 
Working Plunker example can be found here:
 
Demo
 
Embedded example:
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Dinal

    Thanku very much sir