ボックスシャドウは、

Question

<div class="group"> 
     <input placeholder="Номер карты" class="inpts inpt-card"> 
     <input placeholder="Владелец карты" class="inpts inpt-owner"> 
     <input placeholder="ММ/ГГ" class="inpt-mm small-inpts mmgg"> 
     <input placeholder="CVC" class="inpt-cvc small-inpts cvc"> 
     <div class="clear"></div> 

すべてのコードが入力フォーカスに間違って動作します。 Z-索引が変更されないどうしたらいいですか？

あなたが出て焦点を当てたときのz-index値を戻し、その後、あなたが集中入力のzインデックスプロパティを変更するにはjQueryを使用することができ

Answer 1

エロー

ポジション：relative;

EDIT：ノーjqueryの/ jsのコードに必要な芋

.inpts:focus, .small-inpts:focus { 
    -webkit-box-shadow: 0px 0px 10px 0px #fbb040; 
    -moz-box-shadow: 0px 0px 10px 0px #fbb040; 
    box-shadow: 0px 0px 10px 0px #fbb040; 
    z-index: 10; 
    -webkit-appearance: none; 
    position: relative; 
} 

あなたは本当にこのページのすべての入力は "入力" の中にそれを追加影響を及ぼすする場合

input { 
    outline: none; 
    position: relative; 
} 

Updated jsfiddle

Answer 2

：

$("input").on("focusin", function(){ 
    $(this).css("z-index", 1); 
}); 
$("input").on("focusout", function(){ 
    $(this).css("z-index", 0); 
}); 

また、次を追加する必要があります適用するZインデックスルールの入力要素にCSS：

input { 
    outline: none; 
    position: relative; 
    top: 0; left: 0; 
} 

EDIT：あなたはまた、単に示すBのようなCSSプロパティを追加することができます更新jsfiddle https://jsfiddle.net/pspb5urc/1/