Как изменить цвет кнопки в форме?
Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере Internet Explorer и Opera. Применение стилевого свойства background не только изменяет цвет фона у кнопки, но также меняет и ее вид, делая кнопку одинаковой в разных браузерах (пример 1).
Пример 1. Цвет кнопки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет кнопки
Результат примера показан на рис. 1.
Рис. 1. Вид обычной и цветной кнопки в браузере Safari
В данном примере стиль кнопки определяется с помощью пользовательского класса b1 , который задается в теге с помощью атрибута class .
Изменение вида кнопки обусловлено применением свойства background или background-color . Смена цвета текста или шрифта на кнопке оставляет исходным вид кнопки, в частности, ее форму и цвет фона.
Как поменять цвет текста на кнопках?
Заранее говорю, что я в коде понимаю очень мало (практически ничего), поэтому не кидайте в меня пожалуйста помидоры. Поставила подвал на сайт, просто сторонний код на другом сайте нашла. После вставки кода поменялся цвет на ссылках в меню и названиях товаров. Был черный, стал ярко синий. Вот код, который вставила:
HTML Заметила, что если убрать в начале HTML кода вот это
то ссылки становятся снова черными, но и подвал становится уродливым. Нашла в интернете еще такой код:
a:link < /* unvisited link */ color: #384B7A; text-decoration: none; >a:visited < /* visited link */ color: #384B7A; text-decoration: none; >a:hover < /* mouse over link */ color: #6FFF57; text-decoration: none; border-bottom: none; >a:active < /* active link */ color: #000000; text-decoration: none; >
Это помогло исправить цвет на ссылках, но при этом на всех градиентных кнопках текст тоже поменялся. Был белым, а теперь его практически не видно. Как сделать так, чтобы текст на кнопках снова стал белый, а все остальное осталось темного цвета? В тех поддержке платформы мне написали: Чтобы оставить подвал и вернуть стандартные стили вы можете добавить код сторонних стилей (из файла bootstrap.min.css) в файл user.css и убрать те, что перезаписывают стандартные. Это не гарантирует исправной работы системы. В вашем случае перезаписываются стили ссылок (тег ). Но мне ничего к сожалению не понятно, а больше они ничего не говорят. Может кто-то поможет мне. Буду очень благодарна. Сайт https://kiprus.ru/
Как изменить цвет кнопки в CSS, если даже !important не помогает?
Учусь разработке и столкнулся с такой проблемой. Прописываю правило к кнопке — все работает, кроме 2-3 вещей.
Например, не меняется цвет текста и не убирается подчеркивание ссылки в кнопке. Хотя все остальное работает.
Вот ссылка на песочницу.
Эта ошибка повторяется несколько раз в последнем попапе ((
В чем может быть дело? Помогите пжлст.
Также не меняется цвет текста в плейсхолдере инпута:
input < border: 1px solid #E0E0E0; color: #000000; /* placeholder color text - WHY DOESN'T IT WORK?*/ border-radius: 3px; padding: 10px; font-size: 14px; width: 200px; margin-top: 10px; margin-bottom: 15px; >И еще там же болячка с отступом снизу. Прописываю margin-bottom, но он не работает. Хотя вроде все правильно:
Помогите пжлст. Уже устал искать ошибки.
- Вопрос задан более трёх лет назад
- 4159 просмотров
Комментировать
Решения вопроса 1
Вот по порядку ответы на ваши вопросы:
1. Почему не переопределяется цвет и не убирается подчеркивание:
Это происходит т.к. вы применяете стили к блоку .btn, но внутри есть тег «a», у которого есть стили заданные браузером, чтобы этого избежать сделайте так:
.btn a
2. Не меняется цвет placeholder.
Это происходит по тому что на него не действует color. Подробности и примеры тут
3. Проблема с margin-bottom:
Тут все просто, он работает, попробуйте выставить его в значение 100px и увидите как кнопка опустится.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Антон Романов @a007mr Автор вопроса
Спасибо огромное! Очень круто и подробно все объяснили. Разобрался 🙂
Ответы на вопрос 1
Что касается этого:
btn border: 0px solid #000000;
width: 160px;
color: #ffffff; /* The color of text in button — WHY DOESN’T IT WORK?*/
text-decoration: none; /* The link style in button — WHY DOESN’T IT WORK?*/
background: #FBD840;
padding: 12px;
text-align: center;
margin-bottom: 30px;
border-radius: 3px;
box-shadow: 0px 3px 15px 3px rgba(249,219,91,0.4);
cursor: pointer;
Селектор! Если вы имели ввиду класс btn, то класс обозначаем в таком формате: .btn <. >
Если же вы имели ввиду сам тег , то писать нужно полное название тега
button
Если я чего то не понял, то давайте ка ссылку на песочницу свою
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Антон Романов @a007mr Автор вопроса
Неправильно скопировал селектор в теме вопроса. На самом деле прописал «.btn». Вот песочница https://codepen.io/a007mr/pen/MzBWdE.
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 2 часа назад
- 21 просмотр
Как изменить цвет кнопки в форме?
Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере Internet Explorer и Opera. Применение стилевого свойства background не только изменяет цвет фона у кнопки, но также меняет и ее вид, делая кнопку одинаковой в разных браузерах (пример 1).
Пример 1. Цвет кнопки
Результат примера показан на рис. 1.
Рис. 1. Вид обычной и цветной кнопки в браузере Safari
В данном примере стиль кнопки определяется с помощью пользовательского класса b1 , который задается в теге с помощью атрибута class .
Изменение вида кнопки обусловлено применением свойства background или background-color . Смена цвета текста или шрифта на кнопке оставляет исходным вид кнопки, в частности, ее форму и цвет фона.