相关疑难解决方法(0)

使用bootstrap,我创建input-group了一个button和input type='file'.

除了以外它在各处都很好IE9.在IE9上,正在从右侧裁剪浏览按钮.

演示: http ://jsbin.com/alESiBo/6/edit

码:

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
</div>

输出:

IE 9.0.8112.16421

Chrome 31.0.1650.63 m

带快照的IE版本:

我正在尝试使用Rails创建一个按钮,使用Rails上传图片.我试过这个:

<input class="tiny round disabled button" name="picture[picture]" type="file">

不幸的是,它没有工作,并创建了两个不同的按钮,让您选择一张图片.我需要专门为文件字段做些什么吗？

我想在上传文件字段中自定义(想要更改背景和颜色等)浏览按钮.

<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13">

我正在使用基础,我没有在文档中看到有关文件输入的任何内容,只有一般的输入元素.但是设置文件输入的样式并不容易.如果你想在所有浏览器中保持整个表单的设计一致,那就更多了.

我已经看到了一些解决方案,如Styling一个输入类型="文件"按钮或https://github.com/filamentgroup/jQuery-Custom-File-Input,但我想知道是否有一些特定的基础,像往常一样包装div样式根本不起作用(div.large-3.columns等).

你怎么做呢？

我想input="file"隐藏并input="file"使用图标设置样式，然后单击该图标以选择图像。

.cover_photo {width:100%; height:250px; overflow:hidden; position:relative;}
.cover_photo img {width:100%;}
.upload_btn { position:absolute; top:0; left:0;}
.upload_btn input[type="file"] {display:none;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section>
	<div class="container-fluid">
    	<div class="row">
        	<div class="col-md-12">
            	<div class="cover_photo">
                  <img class="img-responsive" src="http://underafricanskiessafaris.co.za/wp-content/uploads/2015/02/BG-1.jpg" />
                  <div class="upload_btn">
                    <form>
                        <i id="icon_upload" class="fa fa-camera"></i>
                        <input type="file" name="cover-photo" id="icon_upload" />
                      </form>
                  </div>
                </div>
            </div>
        </div>
    </div>
</section>

我正在使用jQuery UI,我注意到输入文件按钮:

<input type="file">

不能像其他按钮一样设计.我发现这个插件看起来很酷,显然可以让你放一个图像而不是按钮,但是这些例子没有显示任何按钮样式.

如果没有jQuery将主题样式应用于该按钮,我可以在CSS中自己设置样式吗？

我有代码：

<label name="xs" id="xs" for="fileselect">
  <p class="add_atach">Test</p>
</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" style="display:none;" />

如果我离开display:none;点击什么都不会发生。如果我将其更改为visibility:hidden;，则代码有效，但元素占用的空间仍然存在。我该怎么办？

我想知道Choose a File当我<h:InputFile>在JSF中使用标记时,是否有一种标记和重命名JSF显示的文本的方法.

我有一个需要自定义的类型文件的输入。我需要在输入按钮中添加一个图标，更改按钮的名称，最后隐藏所选文件的名称。我尝试了不同的方法，例如使用<div>or <a>，但问题是我需要将所选文件传输为 json 格式。因此，通过 JavaScript 调用浏览操作会导致转换错误。我需要使用文件类型的可自定义输入

                    <input type="file"/>

我需要它看起来如何

当我遇到这个问题时，我花了大约 20 分钟在这里的一篇文章中找到答案：https ://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css/

我在 Stackoverflow 上浏览了很多页关于现有类似问题的过于复杂的答案

将解决方案贴在这里，方便大家快速找到答案

按照问题中提供的示例设置输入类型=“文件”按钮的样式，我尝试了一堆不太令人满意的解决方案

我尝试将输入包装在标签元素中并将显示设置为无

<label className="text-sm bg-stone-200 hover:bg-stone-300" htmlFor="fileUpload">
    <input type="file" className="hidden" id="fileUpload"/>
    Upload File
</label>

这是有效的，但是你会丢失文件名预览 - 解决方案涉及<span>在标签和隐藏输入之间放置一个并在 onChange 事件中更改 span 元素。我认为对于这样一个简单的任务来说代码太多了

我还尝试使用元素属性设置大小，<input type="file" size={60} />这显然对其他人有效，但当我尝试时没有效果