Question

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

<button style="cursor:pointer" />

DEMO

Answer 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;
}

Answer 2

我使用 Javascript

以不同方式完成此操作

您可以通过将输入放入高度为0px和overwflow：hidden的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

Answer 3

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

File | Project  Structure...

Bootstrap输入文件光标

3 个答案: