引导输入文件光标答案

【问题标题】：Bootstrap Input File cursor引导输入文件光标
【发布时间】：2019-10-12 00:34:01
【问题描述】：

我正在使用这个library 创建一个带有引导主题的漂亮输入文件按钮。
我在按钮上添加了一个光标指针，但是
我在整个按钮上看不到光标。

<button style="cursor:pointer" />

DEMO

【问题讨论】：

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你可以使用代码：

        $fileButton.on('click', function(){
            $(this).next('input').trigger('click');
        });

之后：

$fileButton = $('<button style="cursor:pointer" class="' + config.uploadButtonClass + '">' + config.uploadText + '</button>').insertBefore($self);

并将样式添加到：

.inputfile .btn{
    position:relative;
    z-index:2;
}

【讨论】：

【解决方案2】：

我使用 Javascript

以不同的方式做到了这一点

您可以通过将输入置于高度：0px 和溢出：隐藏的 div 中来隐藏输入。然后添加一个按钮或其他 html 元素，您可以根据需要设置样式。在 onclick 事件中，您使用 javascript 或 jQuery 获取输入字段并单击它：

HTML：

<div style="height:0px;overflow:hidden">
   <input type="file" id="fileInput" name="fileInput" />
</div>
<button style="cursor:pointer" onclick="chooseFile();" class="btn btn-defualt"><span style="cursor:pointer" class="glyphicon glyphicon-upload"></span> Search for a file to add</button>

现在输入是隐藏的，但是你可以根据需要设置按钮的样式，它总是会在点击时打开文件输入。

javascript:

function chooseFile() {
      document.getElementById("fileInput").click();
   }

这里是Live Demo

【讨论】：

【解决方案3】：

如果我理解正确，您的问题是无法设置由浏览器生成的 shadow-dom 输入标签的样式这个 css 帮助我解决了同样的问题：

  input[type="button"]::-webkit-file-upload-button,
  input[type="file"]::-webkit-file-upload-button,
  button::-webkit-file-upload-button {
    cursor: pointer;
  }

【讨论】：