html 怎么改变文件上传的样式

html-css023

html 怎么改变文件上传的样式,第1张

input file的样式很难改变，你可以用js控制一个div触发input file，把样式写在div上，把input file隐藏就可以了；代码如下：

<script>

function clp(){

return $("#File").click()

}

</script>

<button class = "clp" onclick = "clp()">clp</button>

<input type="file" id="File" style="display: none"/>

直接写

CSS样式

是不行的

<input

type="text"

size="20"

name="upfile"

id="upfile"

style="border:1px

dotted

#ccc">

<input

type="button"

value="浏览"

onclick="path.click()"

style="border:1px

solid

#cccbackground:#fff">

<input

type="file"

id="path"

style="display:none"

onchange="upfile.value=this.value">

写成这样，用一个text和一个button替代file，然后让file隐藏

表单的文件上传元素默认样式确实是：

只是这样并不美观，于是常见做法是创建一个文本框和一个按钮来配合文件上传元素：

核心就是将上传元素的透明度设置为0，即完全透明，然后绝对定位到按钮上上面，这样用户点击按钮时，实际是点击到上传元素。然后添加js，将上传元素的value值 赋给文本框的value值，实现在文本框中显示文件元素的value属性值。

该上传元素的onchange事件监听函数为：onchange="document.getElementById('textfield').value=this.value"