Javascript 伪元素与输入重叠

我有一个带有自定义样式和伪

：before

和

：after

元素的

输入[type=file]

。但是伪元素似乎位于输入的顶部，当我单击输入时，什么也没有发生

下面是我正在使用的代码和一个示例。我怎样才能解决这个问题

<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

Картинка
JPG，PNG，GIF

文件
溢出隐藏
相对位置
宽度112px
高度112px
游标指针
边框2倍实心#fff
框阴影0 0 1px#e8e8e8
边界半径5px
背景url（“images/PIC copy.png”）
&：之前
内容“”
绝对位置
顶部计算（50%-30px/2）
左计算（50%-30px/2）
宽度30px
高度30px
背景#39ce00
边框1px实心#fff
边界半径50%
&：之后
内容“+”
绝对位置
前33%
左43.5%
字体大小24px
文本居中对齐
颜色#fff
&：悬停：在
背景#ff3c40
&：悬停：之后
变换旋转（45度）
左44.5%
输入[type=“file”]
不透明度0
高度100%
游标指针

如果没有一个有效的示例，很难进行调试。您可以尝试设置元素的顺序以获得正确的堆叠顺序。

您可以创建一个堆栈片段或JSFIDLE来显示问题吗？用一个例子来回答会更容易。另外，这是否发生在特定的浏览器中？删除了gif，并在问题中添加了JSFIDLE演示。