相关疑难解决方法(0)

我想知道如何隐藏标准html文件上传标签的文本字段部分

例如

<input type="file" name="somename" size="chars"> 

这显然会生成一个文本字段,并且该字段旁边是一个浏览按钮...我想隐藏文本字段部分但保留按钮.

我放置了一个上传图像文件的按钮.我想自定义该按钮,我想添加多个图像文件,这是什么逻辑来实现.

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

是否可以自定义按钮no files choosen下方的文本" ".choose我明智地在no files choosen文本前保留相机图像.

如何执行此操作以改善我的网站.

谢谢

按照这个问题的CSS样式技巧,我能够创建一个自定义上传按钮.现在,挑战是让按钮的整个部分将鼠标指针图标更改为手形图标.

我可以在这里看到我部分实现这一目标的方式(jSFiddle).正如您所看到的,当鼠标悬停在按钮的右侧区域时,光标似乎只是一只手(我在最新版本的firefox中).

css (也在jSFiddle上)

 <span id="uploadMask">
    <input type="file" multiple="multiple" name="file" id="file_upload">
     <span class="button">Select Documents</span>
 </span>

css (也在jSFiddle上)

#uploadMask {
  width:160px;
  display: block;
  float:left;
  overflow: hidden;
  height:32px;
  margin-right: 5px;
  position: relative;
}

#uploadMask input {
  position: absolute;
  top:0;
  bottom: 0;
  right:0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

#uploadMask .button {
  background:#ccc;
  line-height:24px;
  padding:5px 15px;
  display:block;
}

有任何想法吗？

当我将图标显示在图像上时.但我想显示这样的图标

当我点击时,它应该允许浏览像这样的文件

<input type ='file'>

我怎样才能做到这一点？

我试着把文件标签放到所有,但它没有用.我怎样才能做到这一点？

.profile-img-container {
  position: absolute;
  width:50%;
}

.profile-img-container img:hover {
  opacity: 0.5;
  z-index: 501;
}

.profile-img-container img:hover + i {
  display: block;
  z-index: 500;
}

.profile-img-container i {
  display: none;
  position: absolute;
  margin-left:43%;
  margin-top:40%;
}

.profile-img-container img {
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="profile-img-container">
  <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
  <i class="fa fa-upload fa-5x"></i>
</div>

小提琴

我可以有两个具有相同for值的标签吗？例:

<label for="foo">Outer label</label>
<div class="foo-bar">
    <input type="checkbox" id="foo" />
    <label for="foo">Inner label</label>
</div>