Как применить начальную загрузку CSS ко всем кнопкам
Я использую Bootstrap, и я хочу применить этот CSS ко всем моим кнопкам. Я попробовал какой-то код, но у меня ничего не вышло. Кстати, я не хочу добавлять атрибут класса ко всем моим кнопкам. Есть какой-либо способ сделать это?
input[type="button"], input[type="submit"] < //Apply Bootstrap button css here! >2 ответа
Вы можете сделать это с помощью jQuery:
Если вы говорите об этих кнопках: http://getbootstrap.com/css/
Вы можете иметь тот же дизайн CSS, если вы используете .btn Класс CSS на полях ввода. Это правильный метод для достижения того, что вы ищете.
Если вы не хотите применять класс CSS к полям ввода, вот код CSS:
input[type="button"], input[type="submit"] < -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.42857; margin-bottom: 0; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; >input[type="button"]:focus, input[type="button"]:active, input[type="button"]:active:focus, input[type="submit"]:focus, input[type="submit"]:active, input[type="submit"]:active:focus < outline: thin dotted; outline-offset: -2px; >input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:focus, input[type="submit"]:hover < color: #333; text-decoration: none; >input[type="button"]:active, input[type="submit"]:active < background-image: none; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset; outline: 0 none; >input[type="button"][disabled], input[type="submit"][disabled] < box-shadow: none; cursor: not-allowed; opacity: 0.65; pointer-events: none; >input[type="button"], input[type="submit"] < background-color: #fff; border-color: #ccc; color: #333; >input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover < background-color: #e6e6e6; border-color: #adadad; color: #333; >input[type="button"]:active, input[type="submit"]:active < background-image: none; >input[type="button"][disabled]:active, input[type="button"][disabled]:focus, input[type="button"][disabled]:hover, input[type="submit"][disabled]:active, input[type="submit"][disabled]:focus, input[type="submit"][disabled]:hover
Затем, если вы хотите синий цвет, вам нужно добавить следующее:
/* Blue */ input[type="button"], input[type="submit"] < background-color:#337ab7; border-color:#2e6da4; color:#fff; >input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover, < background-color:#286090; border-color:#204d74; color:#fff; >input[type="button"]:active, input[type="submit"]:active < background-image: none; >input[type="button"][disabled], input[type="button"][disabled]:active, input[type="button"][disabled]:focus, input[type="button"][disabled]:hover, input[type="submit"][disabled], input[type="submit"][disabled]:active, input[type="submit"][disabled]:focus, input[type="submit"][disabled]:hover
Если вам нужен зеленый цвет, добавьте следующее:
/* Green */ input[type="button"], input[type="submit"] < background-color:#5cb85c; border-color:#4cae4c; color:#fff; >input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover, < background-color:#449d44; border-color:#398439; color:#fff; >input[type="button"]:active, input[type="submit"]:active < background-image: none; >input[type="button"][disabled], input[type="button"][disabled]:active, input[type="button"][disabled]:focus, input[type="button"][disabled]:hover, input[type="submit"][disabled], input[type="submit"][disabled]:active, input[type="submit"][disabled]:focus, input[type="submit"][disabled]:hover
Если вам нужен голубой цвет, используйте следующее:
/* Light Blue */ input[type="button"], input[type="submit"] < background-color:#5bc0de; border-color:#46b8da; color:#fff; >input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover, < background-color:#31b0d5; border-color:#269abc; color:#fff; >input[type="button"]:active, input[type="submit"]:active < background-image: none; >input[type="button"][disabled], input[type="button"][disabled]:active, input[type="button"][disabled]:focus, input[type="button"][disabled]:hover, input[type="submit"][disabled], input[type="submit"][disabled]:active, input[type="submit"][disabled]:focus, input[type="submit"][disabled]:hover
Если вам нужен оранжевый цвет, используйте следующее:
/* Orange */ input[type="button"], input[type="submit"] < background-color:#f0ad4e; border-color:#eea236; color:#fff; >input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover, < background-color:#ec971f; border-color:#d58512; color:#fff; >input[type="button"]:active, input[type="submit"]:active < background-image: none; >input[type="button"][disabled], input[type="button"][disabled]:active, input[type="button"][disabled]:focus, input[type="button"][disabled]:hover, input[type="submit"][disabled], input[type="submit"][disabled]:active, input[type="submit"][disabled]:focus, input[type="submit"][disabled]:hover
Если вам нужен красный цвет, используйте следующее:
/* Red */ input[type="button"], input[type="submit"] < background-color:#d9534f; border-color:#d43f3a; color:#fff; >input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover, < background-color:#c9302c; border-color:#ac2925; color:#fff; >input[type="button"]:active, input[type="submit"]:active < background-image: none; >input[type="button"][disabled], input[type="button"][disabled]:active, input[type="button"][disabled]:focus, input[type="button"][disabled]:hover, input[type="submit"][disabled], input[type="submit"][disabled]:active, input[type="submit"][disabled]:focus, input[type="submit"][disabled]:hover
Как я могу применить CSS ко всем кнопкам, присутствующим на этой странице?
Как я могу применить этот класс стиля CSS ко всем кнопкам, присутствующим на странице, без добавления class=»btn» на каждую кнопку?
5 ответы
Если ваши кнопки или отправить, то это должно сделать это:
input[type="button"], input[type="submit"]
В противном случае, если ваши кнопки :
Чтобы использовать все три типа кнопок:
button, input[type="button"], input[type="submit"]
Я использую asp.net, так что вроде — Ашу
Как добавить Hover в этот Scss? — АДЖИТ СИНГХ
Второй пример не CSS3. Селектор атрибутов уже существует в CSS2.1. Он был расширен только в CSS3. w3.org/TR/CSS2/selector.html#атрибут-селекторы — И Цзян
ИМО, этот вопрос заслуживает того, чтобы быть отмеченным как ответ; IOW, я думаю, он заслуживает зеленой галочки. — Дэвид А. Грей
input[type=submit], input[type=button], button
Если вы не хотите явно устанавливать все стили, но хотите использовать стили, уже определенные в каком-то уже существующем классе (например, в классе начальной загрузки btn-default), вы можете сделать что-то вроде этого:
В моем случае это было то, что я искал, хотя я уверен, что есть какое-то предостережение о том, чтобы делать это таким образом, иначе можно было бы ожидать, что это было что-то выполнимое непосредственно из CSS.
не будет работать в старых браузерах, таких как IE6. Если это проблема, вам, к сожалению, придется добавить свой класс к каждому элементу.
Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css or задайте свой вопрос.