Javascript, CSS Änderung fokussiert Farbe für bestimmte Elemente

Question

ich wie dieser eine Inline-CSS haben für fokussierte Elemente (teilweise dargestellt)

.InfoBox-body input[type=text]:focus, 
    .InfoBox-body input[type=password]:focus, 
    .InfoBox-body input[type=date]:focus, 
    .InfoBox-body input[type=datetime]:focus, 
    .InfoBox-body input[type=number]:focus, 
    .InfoBox-body input[type=search]:focus, 
    .InfoBox-body input[type=time]:focus, 
    .InfoBox-body input[type=url]:focus, 
    .InfoBox-body input[type=email]:focus,  
    .InfoBox-body select:focus{ 
     -moz-box-shadow: 0 0 8px #88D5E9; /* this is sort of blue */ 
     -webkit-box-shadow: 0 0 8px #88D5E9; 
     box-shadow: 0 0 8px #88D5E9; 
     border: 1px solid #88D5E9; 
    } 

Jetzt implementiert ich einige Prüfungen vor (Loop Formularelemente) senden, und ich verwende :

element.focus(); 

in einer Schleife, wenn die Werte nicht mit dem erwarteten Inhalt übereinstimmen.

Dies funktioniert, indem ich das Problemelement fokussiere, aber jetzt möchte ich mehr ausgearbeitet :) Ändern der Fokusfarbe # 88D5E9 in rot.

habe ich versucht, diesen Ansatz

  element.style.cssText = ` 
       .InfoBox-body input[type=text]:focus, 
.InfoBox-body input[type=password]:focus, 
.InfoBox-body input[type=date]:focus, 
.InfoBox-body input[type=datetime]:focus, 
.InfoBox-body input[type=number]:focus, 
.InfoBox-body input[type=search]:focus, 
.InfoBox-body input[type=time]:focus, 
.InfoBox-body input[type=url]:focus, 
.InfoBox-body input[type=email]:focus,  
.InfoBox-body select:focus{ 
    -moz-box-shadow: 0 0 8px #FF0000; 
    -webkit-box-shadow: 0 0 8px #FF0000; 
    box-shadow: 0 0 8px #FF0000; 
    border: 1px solid #FF0000; 
} 
      `; 

aber nicht funktioniert.

Irgendwelche Hinweise? Vielen Dank.

Answer 1

Ok, da niemand geantwortet hat, hier ist meine Lösung nach viel Graben. Zunächst einmal ist mein CSS eingebettet, so ändern Sie es bedeutet eine Menge Codierung, Looping durch

document.styleSheets[]... 

die richtige CSS zu finden, finden die Regel usw.

ich dies brauche eine falsche Eingabe zu konzentrieren gefunden Form und Höhepunkt mit RED, bei vorlegen, damit ich diese Arbeit: inline CSS zu diesem Element

// element.style['-moz-box-shadow'] = "0 0 8px #FF0000"; 
     // element.style['-webkit-box-shadow'] = "0 0 8px #FF0000"; 
     // element.style['box-shadow'] = "0 0 8px #FF0000"; 
     // element.style['border'] = "1px solid #FF0000"; 

     element.style.cssText = ` 

      -moz-box-shadow: 0 0 8px #FF0000; 
      -webkit-box-shadow: 0 0 8px #FF0000; 
      box-shadow: 0 0 8px #FF0000; 
      border: 1px solid #FF0000; 

     `; 

In der Tat, das Hinzufügen, die gleiche Sache, die beide tun.

Scheint mehr Logik, um die ursprüngliche CSS-Regel von Stil zu bearbeiten, aber für den Moment ist dies einfacher. Jetzt

zurückzukehren, wenn der Benutzer auf fokussierte Element klickt, habe ich einfach entfernt diese Inline- und Stil von intial CSS übernimmt

 element.onclick = function() { 

      console.log('Click '+this.id); 

      this.style.cssText = null; 

     }; 

Vielleicht jemand braucht. Prost!