在HTML里用图标来做一个查找（file）按钮。怎么做？

html-css012

在HTML里用图标来做一个查找（file）按钮。怎么做？,第1张

这个不怎么难啊，看下面代码

<html>

<head>

<title>File</title>

<style type="text/css">

#infile {visibility: hidden}

input {font-family: Verdanafont-size: 9pt}

</style>

<script language="JavaScript">

function changeName()

{

var f = document.getElementById("filename")

f.value = document.getElementById("infile").value

}

function openFile()

{

document.getElementById("infile").click()

}

</script>

</head>

<body>

<input type="file" id="infile" onChange="changeName()" />

<input type="text" id="filename" size="50" maxlength="50" />

<a href="javascript: openFile()"><img src="***.jpg" border="0" /></a>

</body>

</html>

原理：

点击图片链接时，触发打开文件框，如果file框里的内容改变时，把file框里的内容传到文本框。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{margin: 0pxpadding: 0pxlist-style: nonetext-decoration: none}/*通配符，个人习惯*/

#btn{background: url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)width: 540pxheight: 258px}

</style>

</head>

<body>

<h1>button按钮的背景是图片</h1>

<button id="btn"></button>

</body>

</html>