你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
CSS在这里可以做很多事情…耍点小花招……
<div id='wrapper'>
<input type='file' id='browse'>
</div>
<style>
#wrapper {
width: 93px; /*play with this value */
height: 28px; /*play with this value */
background: url('browseBtn.png') 0 0 no-repeat;
border:none;
overflow:hidden;
}
#browse{
margin-left:-145px; /*play with this value */
opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
</style>
::参考::http://site-o-matic.net/?viewpost=19
修道院
其他回答
我能想到的唯一方法是在它被渲染后用javascript找到按钮,并分配一个样式给它
你也可以看看这个记录
这周我还需要自定义按钮,并在旁边显示所选的文件名,所以在阅读了上面的一些答案后(谢谢BTW),我想出了以下实现:
HTML:
<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>
CSS
input[type='file'] {
color: #a1bbd5;
display: none;
}
.custom-file-upload {
border: 1px solid #a1bbd5;
display: inline-block;
padding: 2px 8px;
cursor: pointer;
}
label{
color: #a1bbd5;
border-radius: 3px;
}
Javascript(角)
app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});
基本上我正在使用ng-file-upload lib, angular方面,我将文件名绑定到我的$作用域,并给它的初始值为'No file selected ',我还将onFileSelect()函数绑定到我的作用域,因此当一个文件被选中时,我使用ng-upload API获取文件名并将其分配给$scope.filename。
你不需要JavaScript !下面是一个跨浏览器的解决方案:
请看这个例子!-适用于Chrome/FF/IE - (IE10/9/8/7)
最好的方法是将一个带有for属性的自定义标签元素附加到隐藏的文件输入元素。(标签的for属性必须匹配文件元素的id,这样才能工作)。
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>
作为一种替代方法,你也可以直接用标签包装文件输入元素:
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
在样式方面,只需使用属性选择器隐藏输入元素。
input[type="file"] {
display: none;
}
然后,您所需要做的就是设置自定义标签元素的样式。(例子)。
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 -值得注意的是,如果你使用display: none隐藏元素,它将在IE8及以下版本中不起作用。还要注意,jQuery验证默认情况下不验证隐藏字段。如果这两种情况对您来说是一个问题,这里有两种不同的方法来隐藏输入(1,2),在这种情况下可以工作。
这些答案很好,它们都适用于非常具体的用例。也就是说,他们固执己见。
所以,这里有一个答案,它没有任何假设,但无论你如何修改它都是有效的。你可以用css改变设计,添加javascript,可能会显示一个文件名的变化,等等,它仍然会一直工作。
代码:
这里是核心css
.file-input{
pointer-events: none;
position: relative;
overflow: hidden;
}
.file-input > * {
pointer-events: none;
}
.file-input > input[type="file"]{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: all;
cursor: pointer;
height: 100%;
width: 100%;
}
和核心html:
<div class="file-input">
<input type="file"/>
</div>
如您所见,我们强制将.file-input元素或其任何子元素上发生的任何指针事件(单击)代理到文件输入。这是因为文件输入的位置是绝对的,并且总是占用容器的宽度/高度。因此,您可以根据自己的需要进行定制。样式包装成一个按钮,使用一些js显示文件名选择,等等,没有什么会打破,只要上述核心代码保持不变。
正如你将在演示中看到的,我已经添加了一个带有文本“Select file”的span和一个带有额外样式的类来设置.file-input div的样式。这应该是任何人想要创建自定义文件上传元素的规范起点。
演示:JSFIDDLE
这里有一个解决方案,它没有真正对<input type="file" />元素进行样式化,而是在其他元素之上使用<input type="file" />元素(可以进行样式化)。<input type="file" />元素实际上是不可见的,因此,整体的错觉是一个漂亮的样式文件上传控件。
我最近遇到了这个问题,尽管Stack Overflow上有太多的答案,但似乎没有一个真正符合要求。最后,我对它进行了定制,以获得一个简单而优雅的解决方案。
我还在Firefox、IE(11、10和9)、Chrome和Opera、iPad和一些android设备上进行了测试。
这里是JSFiddle链接-> http://jsfiddle.net/umhva747/
$('input[type=file]').change(function(e) { $in = $(this); $in.next().html($in.val()); }); $('.uploadButton').click(function() { var fileName = $("#fileUpload").val(); if (fileName) { alert(fileName + " can be uploaded."); } else { alert("Please select a file to upload"); } }); body { background-color:Black; } div.upload { background-color:#fff; border: 1px solid #ddd; border-radius:5px; display:inline-block; height: 30px; padding:3px 40px 3px 3px; position:relative; width: auto; } div.upload:hover { opacity:0.95; } div.upload input[type="file"] { display: input-block; width: 100%; height: 30px; opacity: 0; cursor:pointer; position:absolute; left:0; } .uploadButton { background-color: #425F9C; border: none; border-radius: 3px; color: #FFF; cursor:pointer; display: inline-block; height: 30px; margin-right:15px; width: auto; padding:0 20px; box-sizing: content-box; } .fileName { font-family: Arial; font-size:14px; } .upload + .uploadButton { height:38px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action="" method="post" enctype="multipart/form-data"> <div class="upload"> <input type="button" class="uploadButton" value="Browse" /> <input type="file" name="upload" accept="image/*" id="fileUpload" /> <span class="fileName">Select file..</span> </div> <input type="button" class="uploadButton" value="Upload File" /> </form>
希望这能有所帮助!!