Question

我有一个隐藏的fileupload输入和:before伪元素。我试图隐藏输入并通过单击伪元素打开它。

但目前不是我点击:before的时候。我该如何解决？

这是我的HTML：

<div class="icon-buttonimage">
    <input name="my_image[]" id="my_file" size="27" type="file" class="inputImage" title="Upload images" multiple="multiple" />
</div>

和CSS：

.icon-buttonimage:before {
    content:'\e800';
    font-size: 20px;
    margin-top: 16px;
    margin-left: 9px !important;
}

另见JSFiddle

Answer 1

由于您为包含::before的{{1}}指定了<div>，因此无效。因此，单击它不会触发输入的单击。

同时为input应用opacity:0将无效，因为它也会隐藏伪元素。

您可以在input浏览器上执行以下操作（在chorme和opera中测试）

您可以通过为webkit

::before

您可以通过将<input>和input设置为height隐藏width，并通过相对于0的绝对定位来单独显示::before容器div。

div{
 position:relative;
}
input::before{
 content:'\e800';
 display:block;
 position:absolute;
 /*Other styles*/
}
input {
 width: 0px;
 height: 0px;
 outline:none; /*for hiding the selection around it once clicked*/
}

Updated Fiddle

旁注：:before是css2语法，从css3开始，它是::before

如何通过单击CSS来打开隐藏文件输入：在伪元素之前

1 个答案:

Updated Fiddle