将输入字段文件隐藏在图像后面
Hide input field file behind image
我正在尝试将 file input 字段放在头像后面。单击头像时，用户应该能够 select 图像。它工作得很好，但我如何隐藏输入字段（请参阅代码片段）。当我添加 visible: hidden 它消失了，但显然它不再可点击了。
我该如何解决这个问题？我正在使用 TailwindCss:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100">
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="50px" height="50px"><g><g><g><path d="M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z" data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/><polygon points="24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 " data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/></g></g></g> </svg>
</div>
<input id="file"
class="absolute w-full h-full"
ref="file"
type="file"
accept="image/*"/>
</div>
谢谢！
你可以这样做，这不是官方的做法，但在这种情况下你可以使用这个
input[type='file'] {
opacity: 0;
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100">
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="50px" height="50px"><g><g><g><path d="M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z" data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/><polygon points="24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 " data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/></g></g></g> </svg>
</div>
<input id="file"
class="absolute w-full h-full"
ref="file"
type="file"
accept="image/*"/>
</div>
使用label标签：https://www.w3schools.com/tags/tag_label.asp;
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100">
<label for="file">
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="50px" height="50px"><g><g><g><path d="M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z" data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/><polygon points="24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 " data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/></g></g></g> </svg>
</div>
</label>
<input id="file"
class="absolute w-full h-full"
ref="file"
type="file"
accept="image/*" style=" visibility: hidden;"/>
</div>
我正在尝试将 file input 字段放在头像后面。单击头像时，用户应该能够 select 图像。它工作得很好，但我如何隐藏输入字段（请参阅代码片段）。当我添加 visible: hidden 它消失了，但显然它不再可点击了。
我该如何解决这个问题？我正在使用 TailwindCss:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100">
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="50px" height="50px"><g><g><g><path d="M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z" data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/><polygon points="24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 " data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/></g></g></g> </svg>
</div>
<input id="file"
class="absolute w-full h-full"
ref="file"
type="file"
accept="image/*"/>
</div>
谢谢！
你可以这样做，这不是官方的做法，但在这种情况下你可以使用这个
input[type='file'] {
opacity: 0;
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100">
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="50px" height="50px"><g><g><g><path d="M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z" data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/><polygon points="24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 " data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/></g></g></g> </svg>
</div>
<input id="file"
class="absolute w-full h-full"
ref="file"
type="file"
accept="image/*"/>
</div>
使用label标签：https://www.w3schools.com/tags/tag_label.asp;
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100">
<label for="file">
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="50px" height="50px"><g><g><g><path d="M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z" data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/><polygon points="24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 " data-original="#010002" class="active-path" data-old_color="##565A5" fill="#565A5C"/></g></g></g> </svg>
</div>
</label>
<input id="file"
class="absolute w-full h-full"
ref="file"
type="file"
accept="image/*" style=" visibility: hidden;"/>
</div>