html - 如何在 html 和 css 中为表单创建圆形图像输入

Question

我正在制作一个表格，在顶部我希望有一个圆形图像输入，如下面的屏幕截图所示，这样当用户单击它时，他们可以上传自己的图像。 My design for a website, including the image input

Answer 1

如果我得到你的问题，这是这样做的方式:通过隐藏输入和jQuery

HTML:

<form>
   <img src="http://via.placeholder.com/150x150" style="border-radius:50%"/>
   <input type="file" id="myfile" style="display:none"/>
</form>

和javascript

$('#image').click(function(){
    $('#myfile').click()
})

JS fiddle :https://jsfiddle.net/r89gbqh6/

希望对您有所帮助! ;)