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
removed the outline it seems but still looks off to me for overall design
input:focus (or whatever the class' input is).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@MD you can add
flex: 1 to your input, so it'd take the rest of the space available in its flexed parentInteresting. Would that get closer to the search glass?
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 parentWow
So I was doing the design right
Any tips that could maybe enhance it some or look even nicer than it is now?
i honestly thought it was great the way it was lol
i also thought the outline on the input looked just fine