У меня есть панель поиска, и я хочу знать, есть ли способ сделать плавный переход при нажатии на нее? Я пробовал использовать transition: 0.4s ease
на панели поиска CSS, но это не работает. Я также пробовал анимацию ключевых кадров, но это тоже не работает. Это также не переход цвета, у меня непрозрачность автоматически установлена на 85%, а при нажатии она снижается до 60%, это то, что я пытаюсь сделать плавным переходом.
.search .query {
border: 0;
outline: 0;
background-color: transparent;
font-family: inherit;
font-size: 14px;
margin-top: 20px;
width: 100%;
opacity: 85%;
transition: 0.4s ease;
}
input:focus::-webkit-input-placeholder {
opacity: 60%;
}
input:focus:-moz-placeholder {
opacity: 60%;
}
input:focus::-moz-placeholder {
opacity: 60%;
}
input:focus:-ms-input-placeholder {
opacity: 60%;
}
<form class = "search" action = "javascript:return false">
<input type = "text" class = "query" placeholder = "search tags...">
</form>
Просто убедитесь, что вы редактируете только текст заполнителя, а не все поле ввода. :)
.search .query {
border: 0;
outline: 0;
background-color: transparent;
font-family: inherit;
font-size: 14px;
margin-top: 20px;
width: 100%;
}
.search .query::placeholder {
opacity: 0.85;
transition: 0.4s ease;
}
.search .query:focus::placeholder {
opacity: 0.6;
}
<form class = "search" action = "javascript:return false">
<input type = "text" class = "query" placeholder = "search tags...">
</form>
@disinfor о да, ты прав. Изменил, теперь должно работать?
Даже если этот ответ принят, это не плавный переход. Вопрос, помеченный как дубликат, объясняет больше. Но пока он соответствует требованиям ОП, все хорошо!
Кроме того, вам не нужно использовать десятичную форму. Непрозрачность, конечно, может быть в процентах: developer.mozilla.org/en-US/docs/Web/CSS/opacity
Это не то, чего хочет ОП. Ваше решение изменяет непрозрачность всего ввода, а не только заполнителя.