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>

所有代码位于 - https://jsfiddle.net/romariokbn/pspb5urc/

我想在所有聚焦输入上使用框阴影，但它们的某些面在其他输入下。 Z-index 更改不起作用。我该怎么做？

Answer 1

您可以使用 jQuery 更改您关注的输入的 z-index 属性，然后在您关注时恢复 z-index 值：

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

您还需要将以下 CSS 添加到要应用 z-index 规则的输入元素中：

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

编辑：更新了 jsfiddle https://jsfiddle.net/pspb5urc/1/

Answer 2

您也可以只添加 css 属性如下所示

位置：相对；

编辑：不需要 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"

内添加

input {
    outline: none;
    position: relative;
}

Updated jsfiddle

Box Shadow 在输入焦点上工作不正确

Box Shadow works incorrectly on focus in input

html

css

z-index

box-shadow