2016-08-28 8 views
0

電子メールとパスワードの2つの要素入力を持つページHTML5があります。私は次のことをしたい:外側の要素のCSSを変更するにはどうすればよいですか?

1.-私は入力電子メールに焦点を合わせたとき、私は、タグの要素bにCSSスタイルを追加したい。
2.入力したパスワードに注目したとき、タグの要素にCSSスタイルを追加したいb

が可能ですか?

おかげ

これは私のコードです:

CSS:

input.dx-texteditor-input:focus + .tooltip 
{ 
    opacity: 1; 
}    
input.dx-texteditor-input: focus + .tooltip-top-right 
{ 
    right: 0; 
    left: auto; 
    margin-bottom: 5px; 
} 

HTML:

<label class="input"> 
    <i class="icon-append fa fa-lock" style="z-index: 1"></i> 
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox"> 
     <div class="dx-texteditor-container"> 
      <input class="dx-texteditor-input" name="email" type="email"> 
      <div class="dx-placeholder"></div> 
      <div class="dx-texteditor-buttons-container"> 
       <span class="dx-clear-button-area" onclick="void(0)"> 
        <span class="dx-icon dx-icon-clear"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <b class="tooltip tooltip-top-right" style="opacity:0"> 
     <i class="fa fa-user txt-color-teal"></i> Please enter email address/username 
    </b> 
</label> 



<label class="input"> 
    <i class="icon-append fa fa-lock" style="z-index: 1"></i> 
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox"> 
     <div class="dx-texteditor-container"> 
      <input class="dx-texteditor-input" name="email" type="email"> 
      <div class="dx-placeholder"></div> 
      <div class="dx-texteditor-buttons-container"> 
       <span class="dx-clear-button-area" onclick="void(0)"> 
        <span class="dx-icon dx-icon-clear"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <b class="tooltip tooltip-top-right" style="opacity:0"> 
     <i class="fa fa-lock txt-color-teal"></i> Enter password 
    </b> 
</label> 
+0

申し訳ありませんが、CSS、およびコード – ericardezp

答えて

0

はたぶん、あなたはこのようにjQueryのセレクタを使用することができます。

$(".form input").focus(function() { 
    $(".form b").css("color","red"); 
}); 

https://jsfiddle.net/5zbsbrp7/

または使用のみ

input:focus + b { 
    color: red 
} 

https://jsfiddle.net/041jsrew/

+0

おかげで私の質問を編集するが、jQueryのは、それが許可されていないと私のレイアウトが異なっています。 – ericardezp

+0

あなたはcssで解決策を見ることができます。 https://jsfiddle.net/041jsrew/ –

関連する問題