Как удалить синее гало свечение из jQuery мобильных элементов ввода, которые получают фокус

Я столкнулся с той же проблемой, что и в:

JQuery Mobile: как не отображать кнопку фокуса гало при нажатии кнопки?

Тем не менее, я пробовал принятый ответ "codaniel", который отлично работает, ИСКЛЮЧАЕТ, когда вы хотите, чтобы рассматриваемый предмет сохранял обычную тень - просто это не было синее гало. Когда вы применяете правила CSS, указанные в его ответе на эти селекторы, он удаляет все в фокусе - включая требуемую нормальную тень. Любые идеи о том, как сохранить желаемую (черную) тень на фокусе, но потерять синее гало свечение?

Спасибо заранее! Коул

Ответ 1

Используйте приведенный ниже CSS для переопределения/удаления тени.

Демо

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

Это приведет к удалению тени из всех входных элементов. Однако, если вы хотите, вы можете добавить его как класс к конкретным элементам/типам ввода. Предполагая, что имя класса noshadow.

Update

Я сделал демонстрацию , чтобы показать вам, как удалить синее гало свечение с разных типов входов. Все типы ввода обернуты DIV, который вмещает основные классы. Таким образом, любой пользовательский класс должен быть добавлен в этот div с помощью .closest('div').

В приведенном ниже коде удаляется синяя тень/добавляется .noshadow только для ввода type=email, оставив другие входы нетронутыми.

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

Я использовал ui-input-text для идентификации ввода, поскольку все входы имеют этот класс. Однако для входа type=search он отличается, поскольку он имеет дополнительный класс .ui-input-search и data-type=search в отличие от других входов. Таким образом, для этого требуется различная процедура добавления пользовательского класса.

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

Ответ 2

Если вы хотите удалить его, перейдите с ответом Omar.

Если вы хотите иметь тень, но другого цвета, вам нужно изменить и переопределить теневой цвет, например:

.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;    
}

Рабочий пример: http://jsfiddle.net/Gajotres/ywraY/

Не забывайте использовать! важно, это единственный способ, которым можно переопределить оригинальный CSS. Этот CSS будет охватывать каждый элемент ввода. Вам нужно всего лишь найти цвет, который вам понравится.

Ответ 3

Просто запишите обычную тень вместо тени.

.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;
}

Или используйте другую тень по вашему выбору.