Comment se débarrasser de la bordure extérieure bleue lorsque l'on clique sur un champ de saisie d'un formulaire ?

Question

Bonjour, je souhaite me débarrasser de la "brillance" bleue qui apparaît lorsque l'on clique sur un champ de texte et que l'on commence à saisir des données. Comment faire ?

Je suis un débutant et je n'ai donc pas beaucoup d'expérience. Mon code est le suivant :

<input type="text" name="search" size="40" value="Job Title e.g. Assistant Manager"  
style="background-color:white; border: 
solid 1px #6E6E6E; height: 31px; font-size:16px; 
vertical-align:0px;color:#bbb" 
onfocus="if(this.value == 'Job Title e.g. Assistant Manager'){this.value = 
'';this.style.color='#000'}" />

Merci de votre attention !

Jacques

Answer 1

Le présent CSS devrait fonctionner dans tous les principaux navigateurs :

    input:focus {
        outline:none;
    }

Si ce n'est pas le cas, essayez d'ajouter l'élément !important directive :

    input:focus {
        outline:none !important;
    }

Answer 2

Il suffit d'ajouter :

<style type="text/css">
#hello:focus
{
  outline:none;
}    
</style>

<input type="text" id="hello"></input>

Bravo !

Answer 3

Vous pouvez utiliser la propriété de style ci-dessous sur l'élément pour éviter la bordure bleue.

style="box-shadow: none;"

Par exemple : Ici, j'ai utilisé dans mon bouton

<button type="button" style="box-shadow: none;">Button</button>

Answer 4

Bien que cela ne soit pas directement lié, je laisse une note ici car c'est cette page du SO qui est apparue lors de ma recherche. Les réponses données ici fonctionnent également pour les vidéos html5. Dans mon cas, une bordure bleue apparaissait sous la vidéo dans Chrome.

Par souci d'exhaustivité :

video 
{
  outline:none;
}

Answer 5

Si vous souhaitez une solution simple et que vous voulez supprimer la bordure bleue de l'ensemble du code html, utilisez

*:focus {outline:none !important}