-2

Como retiro esse focus/outline do input?

Esse é o meu HTML

Estou usando 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>

Ele fica assim quando clico dentro do input:inserir a descrição da imagem aqui

4
  • 1
    Já testaste com CSS input:focus{ outline: none; }?
    – Sergio
    Commented 16/05/2017 às 13:36
  • Já tentei, mas não deu certo! Commented 16/05/2017 às 13:51
  • Podes criar um jsFiddle?
    – Sergio
    Commented 16/05/2017 às 13:52
  • Vou criar um... Commented 16/05/2017 às 14:28

4 Respostas 4

3

Olha, pelo que já responderam pra ti e pelo que vejo na imagem que tu mandou, isso não é um outline, e sim um box-shadow, ou talvez até uma borda com opacidade diferenciada. Coloca um border: none, e também um box-shadow: none no seu elemento.

Em situações como essa, roda a página, clica com o botão direito no elemento, vai em "Inspecionar Elemento" (talvez tenha que fazer isso 2x, porque o primeiro inspecionar elemento pega no body normalmente), e olha as classes/CSS dele na direita. Ali você deve encontrar o que tá causando essa borda/outline do elemento.

inserir a descrição da imagem aqui

-2

É so fazer assim no CSS Tudo isso vira HTML, então funcionara, se preferir, voce também pode add uma className direto do FormControl

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

render: function() {
  return (
    <input type='text' value='Some something' onFocus={this.handleFocus} />
  );
},
6
  • Não funciona...#search{ outline: none; } Commented 16/05/2017 às 14:04
  • Ele continua com o focus... Commented 16/05/2017 às 14:04
  • tentou colocar um !important? input{outline: none !important} Commented 16/05/2017 às 14:17
  • Coloquei tbm com !important... mas não tira... não sei se é pq estou usando o bootstrap. Commented 16/05/2017 às 14:20
  • Tenta isso handleFocus: function(event) { event.target.select(); }, render: function() { return ( <input type='text' value='Some something' onFocus={this.handleFocus} /> ); }, Commented 16/05/2017 às 20:24
-2

declare uma classe css em seu elemento. Ex: <button class="button"></button> daclare uma classe css com a popriedade outline:none :

.button{ outline: 0; }

Ao clicar no button, não aparecerá mais as linhas de focus.

0
-3

Bota a propriedade outline como none. Em css normal ficaria:

input:focus{
outline: none;
}

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .