@kkoshakk

Почему opacity работает только в Chrome?

Вот такой код, работает только в Chrome

.cd-search input {
    border: none;
    padding-left: 2.2em;
    border-radius: 0;
    background-color: #F44336;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    color: #ffffff;
  }
  .cd-search input::-webkit-input-placeholder {
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cd-search input::-moz-placeholder {
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cd-search input:-moz-placeholder {
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cd-search input:-ms-input-placeholder {
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cd-search input:focus::-webkit-input-placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease;
  }
  .cd-search input:focus::-moz-placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease;
  }
  .cd-search input:focus:-moz-placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease;
  }
  .cd-search input:focus:-ms-input-placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease;
  }
}
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
@MNB
Никто и не обещал вам, что transition может работать с placeholder.
У плейсхолдеров поддержка браузерами вообще стремная caniuse.com/#search=placeholder
Или рисуйте сами, либо забейте
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Попробуйте менять не opacity, а
color: #ffffff
на
color: transparent
Сам не проверял, но шанс на успех есть.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы