Javascriptを、変更CSSが特定の要素

Question

の色を集中し、私は、集束要素のため、この1（パート示す）などのインラインCSS

.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; 
    } 

を持っている今、私は、send（ループ状要素）の前にいくつかのチェックを実施し、そして私が使用します：

element.focus(); 

ループ内で値が期待される内容と一致しない場合。

これは問題の要素に焦点を当てて動作していますが、今はもっと精巧にしたいです:)フォーカスカラー＃88D5E9を赤に変更してください。

が、私はこのアプローチ

  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; 
} 
      `; 

を試みたが、動作していません。

ヒントありがとう。

Answer 1

誰も答えなかったので、ここで私の解決策はたくさんの掘り出した後です。 まず第一に、私のCSSがそのようにルールを見つけ、それが

右CSSを見つける

document.styleSheets[]... 

をループ、コーディングの多くを意味変更埋め込まれている、など

私は間違った入力を集中するために、これを必要としますIを提出する時ので、REDとフォームと強調表示し、この作業を見つけました：実際には

// 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; 

     `; 

、両方がは、その要素にインライン CSSを追加して、同じことをやっています。

<input id="uname" class="field-long" value="" style="box-shadow: 0px 0px 8px rgb(255, 0, 0); border: 1px solid rgb(255, 0, 0);" type="text"> 

最初のCSSルールをスタイルから編集するのはもっと論理的ですが、これはもっと簡単です。ユーザーがフォーカスされた要素をクリックしたときに、私は単純にintial CSSからこのインラインスタイルを削除戻す今

が

オーバー

 element.onclick = function() { 

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

      this.style.cssText = null; 

     }; 

がかかりますたぶん誰もがこれを必要とします。乾杯！