0

I have a search bar and I want to know if there's a way to have a smooth transition when it's clicked on? I tried having a transition: 0.4s ease on the search bar CSS but that's not working. I also tried a keyframes animation but that's not working either. It's not a color transition either, I have the opacity automatically set to 85% and on click it lowers to 60%, that's what I'm trying to have a smooth transition on.

.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>
disinfor
  • 10,865
  • 2
  • 33
  • 44

1 Answers1

1

Just make sure you're only editing the placeholder text, not the whole input field. :)

.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>
BradStuartt
  • 26
  • 3
  • 1
    This is not what OP wants. Your solution changes the opacity of the entire input and not only the placeholder. – disinfor Dec 17 '20 at 15:53
  • @disinfor oh yeah you're right. Changed it so it should work now? – BradStuartt Dec 17 '20 at 15:59
  • 1
    Even thought this answer is accepted, it is not a smooth transition. The question marked as a duplicate explains more. But, as long as it meets OPs requirements, all good! – disinfor Dec 17 '20 at 16:08
  • Also, you do not need to use a decimal form. Opacity can certainly take a percentage: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity – disinfor Dec 17 '20 at 16:18