Есть ли способ стилизовать кнопку нижнего колонтитула в белый цвет? - PullRequest
Новая
       11

Есть ли способ стилизовать кнопку нижнего колонтитула в белый цвет?

0 голосов
/ 10 апреля 2019

Меня попросили изменить стиль кнопки нижнего колонтитула на белый, но я не уверен, что то, что я делаю, неверно или что-то не так с кодом.

Я пытался закодировать кнопку самостоятельно, но, похоже, она не права 

footer {
    width: calc(100% - 2em);
    z-index: 500;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    margin: 0 1em;
  }

  footer button.mdc-icon-button {
    margin: 0.5em;
    color: white;        
  }

</style>


<div>
  <h2>abdurrahman abdulwahab</h2>
  <div class ="user-photo mdc-elevation--z3">
    <img src="https://via.placeholder.com/150x150">        
  </div>
  <div class="details mdc-elevation--z3">language</div>
  <div class="messages"></div>
</div>

<footer>
  <button class="btn-address mdc-icon-button material-icons">contact_support</button>
  <button class="btn-phone mdc-icon-button material-icons">perm_phone_msg</button>
  <button class="btn-birthdate mdc-icon-button material-icons">calendar_today</button>
</footer>

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

Ответы [ 3 ]

0 голосов
/ 10 апреля 2019

Исходя из личного опыта, вы можете стилизовать кнопку на линии, используя маршрут style = "attribute".Тем не менее, лучше постараться сохранить стиль в CSS.В своем HTML добавьте класс «button», а в стиле CSS используйте атрибут css «background-color: #FFFFFF».

Он должен выглядеть следующим образом: 

<style>
.button {
  background-color: #FFFFFF;
  color: black;
}
</style>

Вы можете изменить имя класса, которое я использовал здесь, на что-то более определенное для того, что вы редактируете, чтобы оно не сливалось с другим CSS.

0 голосов
/ 10 апреля 2019

Вот код CSS, который влияет только на стили кнопок в нижнем колонтитуле: 

<style>    
    footer button {
      background-color: #fff;
      color: #000;
    }
</style>

Предположим, вы хотите, чтобы цвет шрифта вашей кнопки был черным.

0 голосов
/ 10 апреля 2019

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

Если вы пытаетесь установить белый фон, вам нужно установить background: white; как color устанавливает цвет текста.

Имейте в виду, вам нужно либо удалить color, либо обновить значение, отличное от «white».

...