HTML 输入渐变文本

Question

一直在寻找解决方案，但没有成功，所以我想我会在这里问。

我正在尝试将线性渐变应用于输入字段，就像我对这张图片中看到的按钮所做的那样。



我玩过不同的 CSS 选项，但未能成功。

最好的版本是占位符的样式，但输入值不是。如果我尝试设置输入值的样式，那么事情就会出错。

建议将不胜感激。

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>