박스 그림자에서

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- 색인이 바뀌지 않습니다. 내가 어떻게 해?

Answer 1

또한 단지 CSS 속성을 추가 할 수 있습니다 b를 표시처럼 엘로우

위치 : 상대적;

편집은 : 더 JQuery와/JS 코드는 IMO 필요하지

.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

아웃 초점을 맞출 때, 다음 Z- 인덱스 값을 되 돌리는 당신에 초점 입력의 z-index 속성을 변경 jQuery를 사용할 수 있습니다

$("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; 
} 

편집 : 업데이트 jsfiddle https://jsfiddle.net/pspb5urc/1/