div内の入力がフォーカスされているときの境界線の色（フォーカスステータス）

Question

divに2つの入力があり、フォーカスできるようにtabindex=1を設定します。

<div class="wrapper" tabindex="1"> 
    <input class="input" type="text"> 
    <input class="input" type="text"> 
</div> 

そして、私のSCSS：

div { 
    border: solid 1px lightgray; 
    padding:3px; 
    display: inline-block; 
    background-color: #fff; 
    &:focus { 
    outline: none; 
    border: solid 1px blue; 
    } 
} 
input { 
    border: solid 1px transparent; 
    &:focus { 
    outline: none; 
    border-bottom: solid 1px red; 
    } 
} 

この方法で入力が焦点となったとき、div要素にフォーカスしません。 これを行うにはjQueryを使用します。

(function($) { 
    $(".input").on("focus", function() { 
    $(this).parent("div").addClass("focus"); 
    }); 
    $(".input").on("focusout", function() { 
    $(this).parent("div").removeClass("focus"); 
    }); 
})(jQuery); 

これを行うには良い方法があるのだろうか？

Hereは私のJSFiddleです。

Answer 1

現在、タブでは、div（青い枠線）が選択されています。しかし、そこに何かを入力することはできませんので、もう一度タブを押す必要があります。それは私には無意味です。

<div class="wrapper"> 
    <input class="input" tabindex="1" type="text"> 
    <input class="input" tabindex="2" type="text"> 
</div> 

しかし、離れて、あなたがすでに行っているように私には、javascriptのを除いて、ラッパーのハイライトを作るためにどのような方法を知っていないことから：だから私は、入力にtabindex属性ではなく、ラッパーを与えると思います。