HTML Ввод текста градиента

Question

Я искал решение, но не превалировал, поэтому я подумал, что должен спросить здесь.

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

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

Лучшая версия - где заполнитель стилизован, а входное значение - нет. Если я попытаюсь стилизовать входное значение, то все будет go неправильно.

И совет будет принят с благодарностью.

button{
  background-color: dodgerblue;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  font-size: 32px
}

button i{
  background: -webkit-linear-gradient(#ffffff70, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

input{
  background-color: dodgerblue;
  height: 60px;
  width: 360px;
  font-size: 32px
}

input::placeholder{
  background: -webkit-linear-gradient(#ffffff70, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
input:focus {
    background: -webkit-linear-gradient(#ffffff70, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
*/

<button><i>X</i></button>

<hr />

<input placeholder="SEARCH"/>

Answer 1

Вам понадобятся два фоновых слоя. Один для текста и один для фона.

К сожалению, это не сработает на Firefox из-за известной ошибки: https://bugzilla.mozilla.org/show_bug.cgi?id=1571244

input {
  background-color: dodgerblue;
  color:transparent;
  height: 60px;
  width: 360px;
  font-size: 32px
}

input::placeholder {
  background: linear-gradient(#ffffff70, #ffffff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

input:not(:placeholder-shown) {
  background: 
    linear-gradient(#ffffff70, #ffffff), 
    dodgerblue;
  -webkit-background-clip: text, padding-box;
          background-clip: text, padding-box;
  -webkit-text-fill-color: transparent;
}

<input placeholder="SEARCH">

Для firefox вы можете рассмотреть дополнительный div для фона:

input {
  color:transparent;
  height: 60px;
  width: 360px;
  font-size: 32px;
  background: linear-gradient(#ffffff70, #ffffff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.input {
  display:inline-block;
  background-color: dodgerblue;
}

<div class="input"><input placeholder="SEARCH"></div>

Answer 2

Если вы пытаетесь установить градиент для текста заполнителя, ваш лучший вариант - полностью опустить или удалить заполнитель и установить еще один div поверх верхней части ввода с выбранным вами шрифтом и градиентом текста.

<div id="InpCont">
   <input type="text" id="UsrInp">
   <div id="InpOverlay">
      <p id="PsudoPlcHlder" class="OverlayTxt" contenteditable="true" onchange="PsudoPlcHlder.value=UsrInp.value" max-length="44">Search</p>
   </div>
</div>

#InpCont{
   // Position Where you want this element
   }
#UsrInp{
   position:absolute;
   top:8px; left:50%;
   transform:translateX(-50%);
   width:64%; height:calc(28px + 1.87vh);
   background:linear-gradient(-33deg,#ffffff70, #ffffff);
   z-index:20;
   }
#PsudoPlcHlder{
    position:relative;
    top:-40px; left:calc(20px + 25%);
    width:240px; height:29px; padding:2px;
    background:linear-gradient(23deg,red,green,blue);
    overflow-x:hidden;
    background-clip:text;
    color:transparent;
    z-index:25;
    }

(document.addEventListener('DOMContentLoaded', function(){
    const UsrInp = document.getElementById('UsrInp');
    const PsudoPlcHlder = document.getElementById('PsudoPlcHlder');

    PsudoPlcHlder.addEventListener('click', (function(){
         PsudoPlcHlder.innerText = '';
    })) 
})

Только что попробовал это на моем собственном приложении, и оно, кажется, работает, но я не уверен насчет части отправки формы, так как я не подключил ее к БД в на данный момент, возможно, придется немного поиграть с позиционированием, так как я проверил это только в самом низу моего приложения, но может быть хорошей отправной точкой для того, чтобы вы с ним связались.

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