Remove the focus / outline from the input (CSS)

Question

Remove the focus / outline from the input (CSS)

Navigation

#1 by (-1 votes)
#2 by (-1 votes)

0

How do I remove this focus / outline from the input?

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:

html css react bootstrap

asked by anonymous 16.05.2017 / 15:08

2 answers

-1

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

.button{ outline: 0; }

Clicking on the button will no longer show focus lines.

25.08.2017 / 18:16

How to determine what will be loaded in HTML? group per SQL query

score -1 · Accepted Answer

It's just like doing it in CSS All this will turn HTML, then it will work, if you prefer, you can also add a direct className of FormControl

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

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