更改输入类型="file"中的默认文本?

我想改变按钮上的默认文本，即“选择文件”，当我们使用input=" File"。

我该怎么做呢?也可以看到，在图像按钮是在文本的左侧。我怎么把它放在文本的右边?

当前回答

每个浏览器都有自己的控件呈现方式，因此您不能更改控件的文本或方向。

如果你想要一个html/css的解决方案，而不是Flash或silverlight的解决方案，你可能想尝试一些“类型”的技巧。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

就我个人而言，因为大多数用户坚持使用他们所选择的浏览器，因此可能习惯于在默认呈现中看到控件，如果他们看到不同的内容(取决于您所处理的用户类型)，他们可能会感到困惑。

2011-02-28 07:38:42

其他回答

您可以使用这种方法，它即使输入大量文件也能工作。

2018-09-18 09:59:02

您可以使用一个简单的按钮和隐藏输入文件

使用jquery和bootstrap:

HTML代码

<button class="btn btn-white" id="btn-file" type="button"><i class="fa fa-file-pdf"></i> Anexar Documento</button>
<input name="shutdown" id="input-file" type="file" class="form-control hidden" accept="application/pdf, image/png, image/jpeg">

CSS:

.hidden{display:none}

JS :

$("#btn-file").click(function () {
    $("#input-file").trigger('click');
});

$("#input-file").change(function () {
    var file = $(this)[0].files[0].name;
    $("#btn-file").html('<i class="fa fa-file-pdf"></i> ' + file);
});

2022-08-17 22:59:24

这可能会在将来帮助别人，你可以为输入设置你喜欢的标签，把你想要的任何东西放在里面，隐藏输入，显示为none。

它在iOS的cordova上完美地工作

2016-05-09 00:14:35

使用Bootstrap你可以像下面的代码一样做这件事。

<!DOCTYPE html>
<html lang="en">
<head>

  <style>
    .btn-file {
      position: relative;
      overflow: hidden;
    }

    .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      background: white;
      cursor: inherit;
      display: block;
    }

  </style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>

2016-09-22 12:31:47

这是一种非常简单的纯css创建自定义输入文件的方法。

使用标签，但是从前面的回答中可以知道，标签不会调用onclick firefox中的函数，可能是一个bug，但与以下内容无关。

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

你要做的就是将标签样式设置成你想要的样子

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

现在简单地隐藏实际的输入按钮，但你不能将其设置为可见:隐藏

所以通过设置不透明度:0来让它不可见;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

现在，你可能已经注意到，我在标签上有和输入字段相同的类，这是因为我希望两者具有相同的样式，因此，无论你在哪里点击标签，你实际上是在点击不可见的输入字段。

2016-09-29 08:43:43

更改输入类型="file"中的默认文本?

推荐文章

最新文章

标签