Changer la couleur du input:active ?

Changer la couleur du input:active ? - HTML/CSS - Programmation

Marsh Posté le 26-06-2014 à 12:48:40    

Bonjour à tous,

 

j'ai beau chercher, je ne parviens pas à trouver comment changer la couleur de la bordure des champs de textes, de recherches etc...

 

Pour être concret, le champ de recherche que j'ai codé prend par défaut la couleur du navigateur lorsqu'on clique à l'intérieur du champ.

 

La même couleur apparaît en ce moment même autour du cadre pour écrire mon sujet (bleu pointé sur l'image) http://img4.hostingpics.net/thumbs/mini_137764test.png

 

Je pensais que le paramètre à intégrer dans le style était :

 

.input:active {
border: 1px;
border-color: #88888888
border-style: solid;
}

 

Mais rien ne se passe et en inspectant l'élément on voit que les paramètres n'ont même pas été cherchés.

 

quelqu'un aurait il une idée ?

 

Merci :)

Message cité 1 fois
Message édité par Fxmartin le 26-06-2014 à 12:49:15

---------------
Feedback
Reply

Marsh Posté le 26-06-2014 à 12:48:40   

Reply

Marsh Posté le 26-06-2014 à 16:57:10    

Ce ne serait pas un comportement du navigateur?

 

Par exemple, une simple page contenant :

Code :
  1. <input type="text"></input>
 

Sous Chrome j'ai bien le même comportement (alors qu'il n'y a pas de css).
Sous IE, j'ai un cadre bleu au survol du composant, mais une fois qu'il a le focus le cadre redevient noir.


Message édité par x1fr le 26-06-2014 à 16:57:44

---------------
Origin / PSN / Steam / Uplay : x1fr - bnet : Fab#2717
Reply

Marsh Posté le 26-06-2014 à 23:40:13    

Fxmartin a écrit :

.input:active {
border: 1px;
border-color: #88888888
border-style: solid;
}


Tes éléments input ont une classe .input ? Tu as mis un point au début de ton sélecteur en tout cas.
 
Si tu veux être sûr que c'est pris en compte, tu peux le voir avec :

Code :
  1. input {
  2.  background-color: red;
  3.  color: white;
  4. }


 
Est-ce que ça fonctionne sans le :active au moins ?
Et si tu remplaces ce pseudo par :focus plutôt ?
 
Pour faire plus court: border: 1px solid #888;
Pour faire plus interchangeable : border-width: 1px; et les 2 autres lignes inchangées
 
Sais-tu te servir de l'Inspecteur d'élément dans Chrome, Firebug ou "Examiner l'élément" dans Firefox, F12 sur tous les navigateurs y compris IE ?
 
Es-tu en train de styler un type text ou search ? Sur Chrome, ça passe souvent par -webkit-appearance: none  :wahoo:


Message édité par islis le 26-06-2014 à 23:41:04
Reply

Marsh Posté le 27-06-2014 à 09:17:48    

Utiliser focus au lieu de active, car active ne se déclenche que fugitivement lors de l'activation du champ, par exemple lorsque'on clique dedans avec la souris, alors que focus créé un changement d'apparence pendant tout le temps que la saisie est active dans le champ.

Reply

Marsh Posté le 06-07-2014 à 12:27:15    

Bonjour à tous,  
 
et surtout merci à tous d'avoir répondu ! J'ai été débordé ces derniers temps...
 
Alors je vais m'empresser de tester vos propositions et vous donner un retour.
 
Pour répondre à x1fr oui il me semble que c'est un comportement de navigateur.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed