伪元素与输入重叠

Question

我有input[type=file]个自定义样式和伪:before和:after元素。但是伪元素似乎位于输入的顶部，当我点击输入时没有任何反应。

以下是我正在使用的代码和demo jsfiddle here。我该如何解决这个问题？

<div class="form-group image">
        <label for="image" class="control-label">Картинка</label>
        <div class="file">
              <input type="file" accept="image/png, image/jpeg, image/gif" name="image" id="image">
        </div>
       <p>Используйте<br>JPG, PNG, GIF</p>
 </div>

.file
        overflow hidden
        position relative
        width 112px
        height 112px
        cursor pointer
        border 2px solid #fff
        box-shadow 0 0 0 1px #e8e8e8
        border-radius 5px
        background url("images/PIC-copy.png")
        &:before
            content ""
            position absolute
            top calc(50% - 30px/2)
            left calc(50% - 30px/2)
            width 30px
            height 30px
            background #39ce00
            border 1px solid #fff
            border-radius 50%
        &:after
            content "+"
            position absolute
            top 33%
            left 43.5%
            font-size 24px
            text-align center
            color #fff
        &:hover:before
            background #ff3c40
        &:hover:after
            transform rotate(45deg)
            left 44.5%

        input[type="file"]
            opacity 0
            height 100%
            cursor pointer

Answer 1

没有一个有效的例子，很难调试。您可以尝试设置元素的z-index以获得正确的堆叠顺序。