gradient text input outline border-radius?
Do you have a technique for giving a text input a gradient outline on focus that has a matching border-radius with the text input? I found a solution for the gradient outline using border-image on focus but this doesn’t allow a border-radius here is the CodePen with border-image, this is the effect I’m looking for I just want the gradient outline to have a border radius as well https://codepen.io/jq712/pen/KKEzmJK
8 Replies
You just have to move the border to the background
If you want it to be animatable, you can use a pseudo element (not on the input as they don’t have content so no pseudo elements). Otherwise , I upvote z-‘s suggestion for using background-image with two gradients on padding box and border box. And the background position can be animated/transitioned *
I added a second input showing how you can then use this to transition from grey to the gradient, you can't transition between gradients, but now that we have a border to play with it can cover up the gradient when not focussed
ah, was working on it as well. didnt look at z's yet
https://codepen.io/MarkBoots/pen/jOJqLVa
seems like the same solution
Stack Overflow
Border Gradient with Border Radius
I have the following CSS:
a.btn.white-grad {
background: $lgrey;
color: #313149 !important;
border: 1px solid #000;
border-image-source: linear-gradient(to right, #9c20aa, #fb3570);...
