Box Shadow在输入焦点上无法正常工作

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>

All code at - https://jsfiddle.net/romariokbn/pspb5urc/

I want box-shadow on all of the focused inpts, but some sides of them is under the other inpts. Z-index changes doesnt work. How can I do it?

Answer 1

You can also just add the css property like shown below

position: relative;

EDIT: no jquery / js code needed 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;
}

If you really wish to affect all inputs on this page add it within "input"

input {
    outline: none;
    position: relative;
}

Updated jsfiddle

Answer 2

You could use jQuery to change the z-index property of the input you focus on, then revert the z-index value when you focus out:

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

You'll also need to add the following CSS to the input elements for the z-index rule to apply:

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

EDIT: updated jsfiddle https://jsfiddle.net/pspb5urc/1/