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

html-css024

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"