Remove Focus/Outline from input (CSS)

Question

How to remove this input Focus/Outline?

This is my HTML

I’m using Reactjs, Bootstrap-React

<div className="viewInstrument-table-heading">
                    <div className="table-heading1">
                        <span>Parâmetros</span>                      
                        <i className="material-icons flip">assignment_return</i>
                        <i className="material-icons">cached</i>                            
                    </div>

                    <div className="table-heading2">
                         <FormGroup className="viewInstrument-formSearch">                            
                            <InputGroup>
                                <InputGroup.Addon>
                                    <i className="material-icons icon-search">search</i>
                                </InputGroup.Addon>
                                <FormControl placeholder="Pesquisar instrumento" type="text" />
                            </InputGroup>
                        </FormGroup>
                    </div>
                </div>

It looks like this when I click inside the input:

Answer 1

Look, from what they’ve already answered to you and what I see in the image you sent, this is not a outline, and yes a box-shadow, or maybe even an edge with differentiated opacity. Places a border: none, and also a box-shadow: none in its element.

In situations like this, rotate the page, right-click on the element, go to "Inspect Element" (maybe you have to do this 2x, because the first inspect element picks up on the body normally), and look at its/CSS classes on the right. There you should find what is causing this edge/Outline of the element.

Answer 2

declare a css class in its element. Ex: <button class="button"></button> daclare a css class with Outline:None :

.button{ outline: 0; }

Clicking the button will no longer show the Focus lines.

Answer 3

Just do it like this in CSS All of this becomes HTML, so it will work, if you prefer, Voce can also add a classname straight from Formcontrol

    handleFocus: function(event) {
  event.target.select();
},

render: function() {
  return (
    <input type='text' value='Some something' onFocus={this.handleFocus} />
  );
},

Answer 4

Put the property Outline as None. In normal css it would look:

input:focus{
outline: none;
}