Removed blue shadow

From inputs / jQuery Mobile

by Omar X

HTML

<input type="text" value="text" />
<p>Shadow removed - search input</p>
<input type="search" placeholder="Search.." value="" />
<p>Shadow removed - number input</p>
<input type="number" value="12345" />
<input type="password" value="foo" />
<input type="email" value="email@me.net" />
<input type="date" />

CSS

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

JavaScript

// Remove shadow from Search
$(document).on('focus', 'input', function () {
    if ($(this).closest('div').hasClass('ui-input-search')) {
        $(this).closest('div').addClass('noshadow');
    }
});

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