Search Bar seems to have an issue with the input text

The input element seems to create too big of an outline that either exceeds the container it's in or it matches the width and height and shows a outline border that doesn't go away. Is there any way to avoid the outline and also any suggestions on what I can do to make it look better. Seems off to me https://codepen.io/MD-2016/pen/JjBGgBz
8 Replies
MD
MD2y ago
removed the outline it seems but still looks off to me for overall design
Myndi
Myndi2y ago
input:focus (or whatever the class' input is).
MD
MD2y ago
I did remove the outline using outline: none; just looks weird seems like I cant get the input box to be correct in size so it's closer to the search glass
dowellcamel
dowellcamel2y ago
@MD you can add flex: 1 to your input, so it'd take the rest of the space available in its flexed parent
MD
MD2y ago
Interesting. Would that get closer to the search glass?
dowellcamel
dowellcamel2y ago
yes it would in fact. there would no longer be space between them if you'd then want to add some space between them, you may use gap on the flex parent
MD
MD2y ago
Wow So I was doing the design right Any tips that could maybe enhance it some or look even nicer than it is now?
dowellcamel
dowellcamel2y ago
i honestly thought it was great the way it was lol i also thought the outline on the input looked just fine
Want results from more Discord servers?
Add your server