Discussion :

[nicottin]

Bonjour

Le style de mes bouton passe bien sous Firefox.
Mais sous IE, dès que la page à le focus le bouton a une légère bordure noire. Comment éviter cela ??

Mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
input {
	color : rgb(248, 153, 12);
	border : 1px solid rgb(248, 153, 12);
	background-color : rgb(255, 247, 235);
}
 
input:hover, input:focus {
	background-color : #fff;
}
 
input[type="submit"], input[type="button"] {
    border : 1px solid rgb(248, 153, 12);
	color : rgb(248, 153, 12);
    cursor:pointer;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<p> 
    <label for="user">Utilisateur :</label>
    <input type="text" name="user" id="user" tabindex="1" value="" />
</p>
<p>
    <label for="password" class="top">Mot de passe :</label><br />
    <input type="password" name="Password" id="password" tabindex="2" value="" />
</p>
<p><input type="submit"  value="Connexion" /></p>

Merci pour votre aide

[trotters213]

c'est normal tu mets ton border à 1px dans les input du fichier CSS.
Fais border:none;

[mLk92]

Ouh pinez du RGB , Respect !!

[nicottin]

Non ce n'est pas de là que viens mon problème.

Jette un oeil avec IE : ici

Tu vas comprendre quand tu clic sur un input, le bouton recupere direct le focus et ca met un petit bordure noir.

[E.Bzz]

Le style de ton bouton vient visiblement à la fois du <p> et de l'input.
Le cadre est celui autour de l'input (incontournable, sauf à modifier le code IE )
Applique tout le style à l'input, sans le <p> ...

A+

[trotters213]

Je ne vois pas le problème.
Si ton problème c'est les pointillés autour du lien une fois que tu as cliqué dessus, tu peux faire onfocus=this.blur() en Javascript.

[Peerofloo]

Il reste la solution de transformer le bouton en type "button" et pas "submit", et de valider le formulaire en JS. Pas tres propre, mais c'est la seul solution que j'ai trouvé pour virer cette satané bordure noir dans IE lors du focus...

[MasterOfChakhaL]

Je ne vois pas le problème.
Si ton problème c'est les pointillés autour du lien une fois que tu as cliqué dessus, tu peux faire onfocus=this.blur() en Javascript.

Le problème de ce code javascript, c'est qu'il empêche la navigation au clavier, ce qui est quand même assez dommage.

Pour le coup du pointillé, tu peux utiliser la propriété outline: none; . Elle marche comme la propriété border mais tu ne peux pas différencier les différents côtés (à vérifier quand même).

Je ne me souviens plus si IE bloque dessus ou si c'est un autre navigateur.

[Tober]

Le problème de ce code javascript, c'est qu'il empêche la navigation au clavier, ce qui est quand même assez dommage.

On peut aussi faire onfocus"document.getElementById('elem suivant').focus()" et hop, la navigation au clavier est de nouveau fonctionnel

[MasterOfChakhaL]

En même temps, si au focus d'un élément tu donnes le focus à un autre élément, c'est pas très différent que de l'enlever.
Le résultat est le même, un élément a le focus, puis pouf! il ne l'a plus...

A moins que je n'ai pas bien compris ta remarque...

[Tober]

ouais, mais quand tu fais onblur, tu sais pas ou tu passes le focus (il doit surement se reinitialiser), donc tu peux plus accéder aux éléments après celui qui blur..
alors que le fait de passer le focus au suivant à l'avantage de pas totallement cassé la navigation par clavier et même avec un peu de chance, l'utilisateur verra même pas qu'il arive pas a avoir le focus sur un élement, mais la je rêve

[MasterOfChakhaL]

Ce que tu sembles oublier, c'est que si ton bouton perd son focus (qu'il soit avant après ou nulle part) il te sera impossible de valider ce bouton avec ton clavier.

C'est la que la navigation clavier devient inopérante.

Tu peux essayer de faire un formulaire avec le blur() ou ta technique. Puis tu essayes d'envoyer le formulaire juste avec ton clavier (là tu constateras que le focus à son importance).

[Tober]

entièrement d'accord, j'avais pas vu qu'on parlé d'un bouton