Как установить цвет текста в кнопке отправки?

Я попытался изменить цвет текста в типе кнопки отправки, но я не знаю, почему я не могу его изменить.

.button {
  width: 105px;
  height: 20px;
  background-image: url('tiny.gif');
  line-height: 20px;
  padding-bottom: 2px;
  vertical-align: middle;
  font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  <!--font-weight: bold;
  -->text-transform: none;
  border: 1px solid transparent;
}

.button:hover {
  background-image: url('tiny_.gif');
}
<input type="submit" value="Fetch" class="button" />

У меня возникла проблема, когда я попытался изменить цвет кнопки отправки.


button html css submit-button
person Venkata Krishna    schedule 18.09.2012    source источник
comment
Возникновение проблем — это нам совсем не помогает. Чего вы ожидаете? Что происходит на самом деле? Есть ли какие-либо сообщения в журнале вашей консоли? Я добавил background-color: red к вашему :hover, и кнопка изменила цвет, когда я навел на нее курсор. Возможно, tiny_.gif не загружается?   -  person Jeremy J Starcher    schedule 18.09.2012

Ответы (4)


arrow_upward
22
arrow_downward

вы попробуйте это:

<input type="submit" style="font-face: 'Comic Sans MS'; font-size: larger; color: teal; background-color: #FFFFC0; border: 3pt ridge lightgrey" value=" Send Me! ">
person Jerry Thomsan    schedule 18.09.2012
comment
Встроенные стили не являются хорошей идеей, когда доступна внешняя таблица стилей. - person Kyle; 18.09.2012
comment
это очень хорошая идея для страниц с плохим CSS-редактированием и для проверки того, как страница будет отображаться. для полных страниц css это должно быть перемещено во внешний файл css. - person Znik; 10.07.2014

arrow_upward
4
arrow_downward

Используйте этот CSS:

color: red;

это все.

person Marcus    schedule 18.09.2012

arrow_upward

arrow_downward

person    schedule
comment
OP хочет изменить цвет текста отправки, и вы предоставляете ему встроенный стиль (= плохая практика), изменяющий цвет фона кнопки. Это мало помогает... - person Laurent S.; 15.05.2016

arrow_upward

arrow_downward

person    schedule
comment
Не могли бы вы объяснить свое решение, только код немного сложно правильно понять ответ - person YLR; 18.12.2020
comment
Хотя этот код может дать ответ на вопрос, предоставление дополнительного контекста относительно того, как и/или почему он решает проблему, улучшит долгосрочную ценность ответа. - person Donald Duck; 18.12.2020