Изменение фона Bootstrap 4.1 .btn-outline-primary при нажатии и активации?
В настоящее время я использую кнопку Bootstrap 4.1 с классом .btn-outline-primary. В обычном состоянии кнопка имеет белый фон с синим текстом. Однако при наведении курсора на кнопку цвета инвертируются: фон становится синим, а текст — белым.
Активное состояние этой кнопки - это только выделенная рамка (со стилем кнопки, таким же, как и неактивное состояние - белый фон, синий текст), и я хотел бы сделать так, чтобы при нажатии кнопки кнопка оставалась в том же стиле, что и при кнопка нависла.
Однако у меня нет доступа к классу наведения кнопки, так как это кнопка начальной загрузки, и мне интересно, как я могу этого добиться? Вот кнопка:
<button class='btn btn-outline-primary max-w-250 mx-1 my-1' type='button' id='MyButton' name='happyButton'>
<div class='d-flex flex-column justify-content-center align-items-center overflow-none'>
<div class='ButtonText line-height-16'>"Text Line One"</div>
</div>
</button>
Я попытался использовать стиль css, используя :focus, чтобы изменить цвет фона, однако это просто перевешивает текст, поскольку текст не инвертируется, и теперь фон соответствует цвету текста.
.btn-outline-primary:focus{
background-color: #18f;
}
Ответы 1
Я не большой пользователь Bootstrap, иначе я бы поискал для вас соответствующие классы. Вместо этого я проведу вас через шаги, чтобы найти их самостоятельно с помощью DevTools. Я буду использовать Chrome, но шаги аналогичны для Firefox и Safari.
В браузере (опять же, желательно Chrome), где отображается кнопка, щелкните ее правой кнопкой мыши. В меню выберите «Проверить».
Появившееся окно должно быть на вкладке элементов, отображая ваш html. Убедитесь, что кнопка выделена на этом дисплее. Если это не так, щелкните HTML-код кнопки, чтобы выделить его.
Правая сторона только что открытого окна должна быть панелью, описывающей выбранный элемент, и должна находиться на вкладке «Стили». Убедитесь, что правила css, которые вы ожидаете применить к кнопке, присутствуют.
В верхней части этой панели, рядом с полем фильтра, есть небольшая кнопка с надписью :hov. При нажатии на эту кнопку отображаются различные псевдоклассы, такие как :hover, которые можно применить к вашему элементу. Установите флажок :hover.
Правила :hover теперь должны отображаться в списке правил css ниже. Найдите соответствующее объявление (.btn-outline-primary:focus или что-то подобное) и скопируйте содержащиеся в нем правила. Затем вы можете в своем собственном css написать
.btn-outline-primary:active {
[whatever rules you copied]
}
У меня есть два дополнения:
- Если это не сработает, повторите первые четыре шага, на этот раз выбрав псевдокласс :active. Если добавленные вами правила отображаются в вашем списке правил (они могут быть далеко внизу!), но не работают, у вас есть проблема со спецификой CSS, и вам следует поискать ее.
- Я написал это, предполагая, что, говоря об активной кнопке, вы использовали термин в техническом смысле css, который представляет собой изменение, которое длится только до тех пор, пока кнопка удерживается нажатой. Если вы хотите, чтобы кнопка постоянно менялась после нажатия, вам нужно будет использовать что-то вне css: либо используйте какой-нибудь Javascript для обновления классов на кнопке, либо измените его и используйте флажок
Это именно то, что мне было нужно! Должно быть очевидно, что я новичок в разработке внешнего интерфейса, и я должен был подумать о проверке элемента. Подробные инструкции были идеальными, спасибо!