Discussion :

[zool.bzh]

bonjour
je voudrai personnaliser mes champs input text et button pour les intégrer a mon site

les borders au survole de la souris sont fait #666 et #999 maintenant je voudrais du 1px solid #6C6C00 pour le clique sur la zone

comment faire voici le formulaire en bas de page -> oOo

[zool.bzh]

Personne ne voit comment faire ??

[NoSmoking]

Bonjour,
et tu n'as rien trouvé en 4 mois

... je voudrais du 1px solid #6C6C00 pour le clique sur la zone

Regarde du côté de la pseudo-classe :focus


Nota perso : compte tenu de la faible différence de couleur entre les différents états je ne vois pas franchement d’intérêt de la chose, mais c'est toi qui vois

[zool.bzh]

Merci NoSmoking
Le focus fonctionne bien en #CA0000 mais il y a toujours la bordure en blanc et bleu sur firefox

[NoSmoking]

mais il y a toujours la bordure en blanc et bleu sur firefox

ceci est lié à la propriété outline, indicateur de l'élément ayant le focus.

Soit le HTML suivant :

Code html :

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

1
2
3
4
5
6
<form action="traitement.php" method="POST">
  <input name="pseudo" type="text" placeholder="pseudo">
  <input name="message" type="text" placeholder="message">
  <button name="verif" type="button">Vérifier</button>
  <button name="subpost" type="submit">Poster</button>
</form>

en appliquant le CSS ci-dessous :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
button,
input {
  padding: .25em;
  border: 2px solid #CCC;
  font: inherit;
}
input:hover {
  border-color: #C00;
}
button:focus,
input:focus {
  border-color: #069;
  border-radius: .25em;
  outline: transparent;    /* ou none, important pour prise en compte :focus */
  box-shadow: 0 0 0 .25em #08F4;
}

tu devrais comprendre ce qui ce passe.

Nota : il est important que l'on sache, quoiqu'il arrive, quel élément à le focus sur une page !

[zool.bzh]

Merci beaucoup NoSmoking, tout fonctionne -> oOo

Code html :

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

1
2
3
4
5
6
7
8
9
<form action="?dos=<?php echo $dossier; ?>&tof=<?php echo $photo; ?>#2" method="post">
 
   <input style="width: 100px" placeholder="<?php echo $pseudo; ?>" name="pseudo" type="text" />
 
   <input style="width: 200px" placeholder="<?php echo $message; ?>" name="message" type="text" />
 
   <button name="verif" type="ver">vérifier</button><button name="subpost" type="submit">poster</button>
 
</form>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
button,
input {
 
  border: 1px solid #666666;
 font-family: arial, verdana, sans-serif;
background-color: #000000;
color: #999999
}
input:hover {
  border: 1px solid #999999;
color: #999999
}
button:focus,
input:focus {
 border: 1px solid #6C6C00;
  outline: none;    /* ou none, important pour prise en compte :focus */
  box-shadow: none;
color: #999999
}

[mowza]

Merci pour la solution, c'est bon à savoir.

Kodi