2014-10-03 6 views
1

Я использую кнопки загрузки для стилей на своей странице, в Chrome 37 кнопки не будут отменяться после того, как я их нажал.Кнопки Bootstrap не отменяет выбор

Кнопка обижая просто:

<button type="button" class="btn btn-primary">Primary</button> 

Полный пример можно найти здесь link.

Этот же пример работает в firefox, как ожидалось. И я уверен, что работал в Chrome до самого последнего обновления.

Есть ли способ, чтобы эта кнопка работала правильно в Chrome?

Edit:

Столбики ниже исправить стиль кнопки, но, к сожалению, не исправить поведение кнопки.

Если после нажатия кнопки происходит действие, связанное с onClick, действие будет перезапущено при нажатии на возврат. Этого не происходит в firefox или более старых версиях хром. Fiddle example.

+0

Пожалуйста, не используйте тег «bootstrap», используйте «twitter-bootstrap», поскольку это означает что-то еще. –

ответ

0

Добавьте это в CSS

.btn:focus { 
    outline: none; 
} 

и удалить background-color: #3071a9; и border-color: #285e8e; из

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open > .dropdown-toggle.btn-primary { 
    color: #fff; 
    /*background-color: #3071a9; 
    border-color: #285e8e;*/ 
} 

Fiddle

+0

Это не решит проблему, когда кнопка нажата, она остается в нажатом положении. Он также остается выбранным таким образом, что когда вы нажимаете return, он запускает действие кнопки. Если вы заказываете ссылку jsfiddle в моем вопросе в самой последней версии хром, вы должны уметь видеть проблему. – LeeG

+0

Я не вижу скрипки? – Fergoso

+0

Извините, есть ссылка сразу после примера кода. Здесь снова [пример] (http://jsfiddle.net/FFXEc/3/) – LeeG

0

я был в состоянии понять это. Проблема заключалась в группировке классов.

В скрипку вы предусмотрели, вокруг линии 95 у вас есть это:

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open > .dropdown-toggle.btn-primary { 
    color: #fff; 
    background-color: #3071a9; 
    border-color: #285e8e; 
} 

Если разбить фокус от остальных, он начинает работать, как вы собираетесь его.

.btn-primary:focus { 
    color: #fff; 
} 
.btn-primary:hover, 
.btn-primary:active, 
.btn-primary.active, 
.open > .dropdown-toggle.btn-primary { 
    color: #fff; 
    background-color: #3071a9; 
    border-color: #285e8e; 
} 

Причиной этого является то, потому что, как только вы нажали на него, он входит в «целенаправленный» состояние, пока вы не нажмете где-нибудь еще. Поскольку ваш фокус был таким же, как активный и зависающий, казалось, что он все еще находится в «активном» состоянии.

Вот working fiddle.

+0

Это изменение фиксирует то, как оно выглядит, но при условии, что после нажатия кнопки происходит действие, связанное с onClick, действие будет перезапущено при нажатии на возврат. Этого не происходит в firefox или более старых версиях хром. Пример скрипта [ссылка] (http://jsfiddle.net/FFXEc/11/). – LeeG

+0

Боюсь, что я, возможно, сделал что-то не так, но я не могу воспроизвести проблему, которую вы имеете. Я запускаю версию Google Chrome 37.0.2062.124. Какую версию вы используете? – helllomatt

Смежные вопросы