How to make a button inside an input
I'm trying to make this input with a search button inside, but I'm not succeeding. How do I do this style?
26 Replies
Then just remove styling on the input and make the container div look like the input. Do make sure that the input takes up all of the space left of the button, so even if clicking in the corner you select the input.
For bonus points you can include a label under the button so clicking anywhere on the div not on the button selects the input
I'll try
This is my html
Do I have to add a background-color to the container?
Yes, and also remove the background and border from the input
Holy shit
I'm bugging
Bugging?
Isn't working
I'll show you
This is my HTML
I don't know what's happening, but when I use background-color, it doesn't paint the entire div
Hmm
and not even the width changes, I put width: 100%;
So the width should be 100% of the size of the parent, which in this case is the wrapper, correct?
I'll quickly make this so you can see what I'm going for. 1 sec
ok
Bro
It worked
but you will laugh
Look what the problem was:
🤭 a classic
I not only didn't notice that but it took me a couple seconds after you showed me to figure out what the issue was
haha
Thanks 
@z- ::theProblemSolver::
I don’t believe you can use none on the background color property, only on the background shorthand, you’d have to use transparent
Good catch, didn't clock that