Kevin Powell - Community•2mo ago

how to Remove border in input while focus in css

css 
#search{ 
width : 300px; 
height:50px; 
padding-left:10px; 
border:1px solid black;
border-left: unset; 
}  

#search:focus{ 
border: unset; 
}

css 
#search{ 
width : 300px; 
height:50px; 
padding-left:10px; 
border:1px solid black;
border-left: unset; 
}  

#search:focus{ 
border: unset; 
}

6 Replies

Tok124 (CSS Nerd)•2mo ago

#search:focus{ 
  border: none; 
  outline: none;
}

#search:focus{ 
  border: none; 
  outline: none;
}

However, i would advice you not to target id's I mean sure, you can do that, but you can also run in to a bunch of problems if you keep on targeting ids. i would advice you to learn about specificity levels before you choose to target an id and get a good understanding on how that works unless you already know it. Then you can target id's in your CSS, but once you know how it works, you will rarely target ids in your CSS honestly xD

Chris Bolson•2mo ago

I would also add that you should always leave some sort of indication that the input (or any form element) has the focus. This is very important, especially for accessibility.

Tok124 (CSS Nerd)•2mo ago

Yeah, i agree on that

vic•2mo ago

Yeah u r Correct , I did that and it works but it looks ugly without any indication

clevermissfox•2mo ago

not just ugly, it completely ruins the ability to use your form for a large amount of your visitors. look into a11y and accessibility, its a core part of learning front end. https://www.seanmcp.com/articles/dont-remove-default-focus-styles-enhance-them/

SeanMcP.com

Don't remove default focus styles, enhance them

This is a WIP that I probably will never finish.

vic•2mo ago

Alright , Thanks for this

Gaming

Programming

how to Remove border in input while focus in css