html - 用图像图标替换文件字段 - HTML/CSS

Question

我想用图像图标替换我的文件字段。因为文件字段看起来并不酷。

看看这个相机图标。当有人单击此图标时，浏览窗口打开：

这是 JsFiddle 演示：http: //jsfiddle.net/8aJb4/2/

这是我的代码：

HTML：

<div class="container">
    <input type="file" name="image_src" id="image_src" >
</div>

CSS：

.container{
    width:500px;
    border:black solid 1px;
    text-align:center;
    padding:4px;

}

这是图像图标的链接：http: //postimg.org/image/rg17ffpxh/

Answer 1

这是一个小提琴

<div class="container">
  <span class="select-wrapper">
    <input type="file" name="image_src" id="image_src" />
  </span>
</div>


.container{
  width: 500px;
  border: 1px solid #333;
  padding: 4px;
}
.select-wrapper {
  background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 33px;
  height: 26px;
}
#image_src {
  width: 26px;
  height: 26px;
  margin-right: 100px;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 5-7 */
}

Answer 2

HTML

 <script>
function upload(){
  document.getElementById("image_src").click();
 }
 </script>
<div class="container">
    <img id="img" src="http://postimg.org/image/rg17ffpxh/" onclick="upload()" alt="hello"/>
   <input type="file" name="image_src" id="image_src" />
   </div>

CSS

.container{
width:500px;
border:black solid 1px;
text-align:center;
padding:4px;   
}
#image_src {
position:absolute;
left:-9999px;
}
#img { cursor:pointer; }

我没有让你的图片链接工作，但这里是jsfiddle

Answer 3

这很简单，您只需将文件元素定义为隐藏，并在其中定义一个带有您自己背景的 img 标签。编写 javascript 以在单击 img 标签时以编程方式单击文件元素。像这样的东西：

<input type="file" name="image_src" id="image_src" hidden='hidden'>
<img src='url' onclick='openWindow()'>

function openWindow(){
document.getElementById("image_src").click
}