Come rimuovere l'evidenziazione del bordo su un elemento di testo di input

611

Quando un elemento HTML è "focalizzato" (attualmente selezionato / a schede), molti browser (almeno Safari e Chrome) inseriranno un bordo blu attorno ad esso.

Per il layout su cui sto lavorando, questo è fonte di distrazione e non sembra giusto.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox non sembra farlo, o almeno mi permetterà di controllarlo con:

border: x;

Se qualcuno può dirmi come si comporta IE, sarei curioso.

Fare in modo che Safari rimuova questo piccolo bagliore sarebbe bello.

— user170579
fonte

1101

Nel tuo caso, prova:

input.middle:focus {
    outline-width: 0;
}

O in generale, per influenzare tutti gli elementi di base della forma:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

Nei commenti, Noah Whitmore ha suggerito di approfondire ulteriormente ciò per supportare elementi che hanno l' contenteditableattributo impostato su true(rendendoli effettivamente un tipo di elemento di input). Quanto segue dovrebbe essere indirizzato anche a quelli (nei browser compatibili con CSS3):

[contenteditable="true"]:focus {
    outline: none;
}

Anche se non lo consiglierei, per completezza, potresti sempre disabilitare il contorno del focus su tutto con questo:

*:focus {
    outline: none;
}

Tieni presente che il contorno del focus è una funzionalità di accessibilità e usabilità; induce l'utente a quale elemento è attualmente focalizzato.

— Cᴏʀʏ
fonte

10

Grazie Cory, ottimo consiglio. È inoltre necessario assegnare il CSS a textarea per coprire tutti i campi di input. input:focus, textarea:focus {outline: none;}

— BaronGrivet,

7

non dimenticare di selezionare ancheselect:focus {outline:none;}

— Geek Num 88,

2

C'è anche il <button>tag, che viene utilizzato dall'interfaccia utente di jQuery e Twitter Bootstrap, tra le altre cose, quindi aggiungerei button: focusall'elenco per completezza.

— Chris Parton,

1

Nella mia esperienza questo può accadere senza focus, nel qual caso ho dovuto applicarlo abutton, button:focus { outline:none; }

— Mike Lyons

1

@ Cᴏʀʏ ti dispiacerebbe spostare la nota su a11y e l'usabilità in cima alla tua domanda? IMO migliorerebbe notevolmente la tua risposta poiché la rimozione di tutte le funzionalità è una cattiva pratica.

— Josef Engelfrost,

64

Per rimuoverlo da tutti gli input

input {
 outline:none;
}

— marcjae
fonte

31

Questo è un vecchio thread, ma per riferimento è importante notare che la disabilitazione del contorno di un elemento di input non è consigliata poiché ostacola l'accessibilità.

La proprietà outline è presente per un motivo: fornisce agli utenti una chiara indicazione del focus della tastiera. Per ulteriori letture e ulteriori fonti su questo argomento consultare http://outlinenone.com/

— Boaz - Ripristina Monica
fonte

1

Boaz, FYI input.middle {outline: none} ti consentirà comunque di attraversare gli elementi (incluso input.middle). La pressione del tasto Tab si focalizzerà anche sul tag di input. L'unica cosa è che non sarai in grado di vedere il focus (focus del contorno) su di esso. Quindi non è così dannoso usarlo ..

— :)

11

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- e questo è esattamente il mio punto. La rimozione del contorno disabilita l' indicazione visiva dell'evento focus, non dell'evento reale. Rimuovere l'indicazione visiva significa renderlo più difficile per le persone con disabilità che fanno affidamento su tale indicazione.

— Boaz - Ripristina Monica

2

A volte dobbiamo scendere a compromessi, al fine di ottenere qualcosa

— :)

6

@AnishNair True. Ma più spesso le persone che leggono questa discussione preferirebbero la via d'uscita facile (cioè outline:none;) senza considerare le implicazioni. Solo perché qualcosa è facile e fa risparmiare tempo, non significa che sia la migliore pratica :)

— Boaz - Ripristina Monica

5

Sono in ritardo alla discussione, ma puoi comunque definire lo stato focalizzato degli input (come cambiare il colore o la larghezza del bordo). Fintanto che tieni a mente l'accessibilità quando lo fai (buon contrasto ecc.), È accessibile quanto i contorni predefiniti.

— Meg,

18

Questa è una preoccupazione comune.

La struttura predefinita visualizzata dai browser è brutta.

Vedi questo per esempio:

Mostra snippet di codice

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Espandi frammento

La "correzione" più comune che più raccomanda è outline:none- che se usata in modo errato - è un disastro per l'accessibilità.

Quindi ... a che serve lo schema comunque?

C'è un sito web a secco taglio molto ho trovato che spiega bene tutto.

Fornisce feedback visivo per i collegamenti che hanno "focus" durante la navigazione di un documento Web utilizzando il tasto TAB (o equivalente). Ciò è particolarmente utile per le persone che non possono usare il mouse o hanno problemi di vista. Se rimuovi il contorno, stai rendendo il tuo sito inaccessibile per queste persone.

Ok, proviamo lo stesso esempio sopra, ora usa il TABtasto per navigare.

Mostra snippet di codice

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Espandi frammento

Notate come è possibile sapere dove si trova lo stato attivo anche senza fare clic sull'input?

Ora proviamo outline:noneil nostro fidato<input>

Quindi, ancora una volta, usa il TABtasto per navigare dopo aver fatto clic sul testo e vedere cosa succede.

Mostra snippet di codice

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Espandi frammento

Vedi come è più difficile capire dove sia il focus? L'unico segno distintivo è il cursore che lampeggia. Il mio esempio sopra è eccessivamente semplicistico. Nelle situazioni del mondo reale, non avresti un solo elemento nella pagina. Qualcosa di più sulla falsariga di questo.

Mostra snippet di codice

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Espandi frammento

Ora confrontalo con lo stesso modello se manteniamo il contorno:

Mostra snippet di codice

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Espandi frammento

Quindi abbiamo stabilito quanto segue

I contorni sono brutti
Rimuoverli rende la vita più difficile.

Quindi qual è la risposta?

Rimuovi il brutto contorno e aggiungi i tuoi segnali visivi per indicare lo stato attivo.

Ecco un esempio molto semplice di cosa intendo.

Rimuovo il contorno e aggiungo un bordo inferiore su : focus e : active . Rimuovo anche i bordi predefiniti sui lati superiore, sinistro e destro impostandoli su trasparente su : focus e : active (preferenza personale)

Mostra snippet di codice

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Espandi frammento

Quindi, proviamo l'approccio sopra con il nostro esempio "reale" dal precedente:

Mostra snippet di codice

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Espandi frammento

Questo può essere ulteriormente esteso utilizzando librerie esterne che si basano sull'idea di modificare lo "schema" anziché rimuoverlo del tutto come Materializza

Puoi finire con qualcosa che non è brutto e funziona con pochissimo sforzo

Mostra snippet di codice

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

Espandi frammento

— Ho Haz Kode
fonte

18

Questo mi ha confuso per qualche tempo fino a quando ho scoperto che la linea non era né un bordo né un contorno, era un'ombra. Quindi per rimuoverlo ho dovuto usare questo:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

— Rikard Askelöf
fonte

6

Potresti usare CSS per disabilitarlo! Questo è il codice che uso per disabilitare il bordo blu:

*:focus {
outline: none;
}

Questo rimuoverà il bordo blu!

Questo è un esempio funzionante: JSfiddle.net

Spero che sia d'aiuto!

— 1010
fonte

4

La rimozione di tutti gli stili di messa a fuoco è dannosa per l'accessibilità e gli utenti della tastiera in generale. Ma i contorni sono brutti e fornire uno stile personalizzato per ogni singolo elemento interattivo può essere una vera seccatura.

Quindi il miglior compromesso che ho trovato è mostrare gli stili di contorno solo quando rileviamo che l'utente sta usando la tastiera per navigare. Fondamentalmente, se l'utente preme TAB, mostriamo i contorni e se usa il mouse, li nascondiamo.

Non ti impedisce di scrivere stili di messa a fuoco personalizzati per alcuni elementi, ma almeno fornisce un buon valore predefinito.

Ecco come lo faccio:

// detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
});

body:not(.keyboardUser) *:focus {
  outline: none;
}

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>

Espandi frammento

— Tom Esterez
fonte

Questo è un approccio approfondito. L' clickascoltatore è un bel tocco.

— Keith DC

4

Ho provato tutte le risposte e non riuscivo ancora a far funzionare le mie su dispositivi mobili , finché non l'ho trovato-webkit-tap-highlight-color .

Quindi, ciò che ha funzionato per me è ...

* { -webkit-tap-highlight-color: transparent; }

— Oneezy
fonte

1

Questa è la soluzione che stavo cercando. Ciò è particolarmente utile quando si hanno esperienze touchscreen con elementi come li

— Anand G

4

L'unica soluzione che ha funzionato con me

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

— Ali Al Amine
fonte

3

Usa questo codice:

input:focus {
    outline: 0;
}

— Touhid Rahman
fonte

2

Nessuna delle soluzioni ha funzionato per me in Firefox.

La seguente soluzione modifica lo stile del bordo in primo piano per Firefox e imposta il contorno su nessuno per gli altri browser.

Ho effettivamente fatto in modo che il bordo del fuoco passasse da un bagliore blu di 3px a uno stile di bordo che corrisponda al bordo dell'area di testo. Ecco alcuni stili di bordo:

Bordo tratteggiato (bordo rosso 2px tratteggiato):

Nessun confine! (bordo 0px):

Bordo Textarea (bordo 1px grigio solido):

Ecco il codice:

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

Espandi frammento

— 1,21 gigawatt
fonte

1

Puoi provare anche questo

input[type="text"] {
outline-style: none;
}

o

.classname input{
outline-style: none;
}

— Santosh Khalse
fonte

1

È possibile rimuovere il bordo arancione o blu (contorno) attorno alle caselle di testo / input utilizzando: outline: none

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

— rizo
fonte

0

Rimuovi il contorno quando lo stato attivo è sull'elemento, usando la proprietà CSS sottostante:

input:focus {
    outline: 0;
}

Questa proprietà CSS rimuove il contorno per tutti i campi di input in primo piano o usa la pseudo classe per rimuovere il contorno dell'elemento usando la proprietà CSS sottostante.

.className input:focus {
    outline: 0;
}

Questa proprietà rimuove il contorno per l'elemento selezionato.

— Shailesh
fonte

0

Prova questo

*:focus {
    outline: none;
}

Ciò avrebbe effetto su tutte le tue pagine

— subindas pm
fonte