Been looking for a solution but no prevail, so I thought I'd ask here.
I am trying to apply a linear gradient to the input field as I have for the buttons as seen in this picture.
I have played around with different CSS options but have not been able to succeed.
The best version is where the placeholder is styled, but the input value is not. If I try to style the input value then things go wrong.
And advice would be greatly appreciated.
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"/>