html - How can I remove input border in React-Bootstrap?

Question

I can't get rid of the input borders of the Form.Control component in React-Bootstrap. I know the question has been asked and answered multiple times but the answers haven't solved my issue.

I've tried redefining the .css classes "input" and "form-control", setting their border to 0 and to none, but it didn't work. I also tried setting the outline to none, and even setting the border the same color as the current background (white) and it didn't work either. I don't know what to try anymore.

question from:https://stackoverflow.com/questions/65650874/how-can-i-remove-input-border-in-react-bootstrap

Answer 1

Easily you can override React Bootstrap classes using an id on the parent node, for example:

<div id="parent-wrapper">
<input placeholder="something">
</div>

And you can redefine properties on css like this:

#parent-wrapper input{
border:0;
.
.
}