为了账号安全,请及时绑定邮箱和手机立即绑定

如何用CSS3 / Javascript设置“输入文件”的样式?

/ 猿问

如何用CSS3 / Javascript设置“输入文件”的样式?

紫衣仙女 2019-08-17 16:30:21

如何用CSS3 / Javascript设置“输入文件”的样式?

我想<input type="file" />用CSS3 设计风格。

或者,我希望用户按下div(我会设计),这将打开浏览窗口。

是否可以使用HTML,CSS3和Javascript / jQuery来做到这一点?


查看完整描述

3 回答

?
撒科打诨

我有一个粗略的例子,你可能想知道一些......

HTML

<div id="file">Chose file</div><input type="file" name="file" />

CSS

#file {
    display:none;}

jQuery的

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});var fileInput = $(':file').wrap(wrapper);fileInput.change(function(){
    $this = $(this);
    $('#file').text($this.val());})$('#file').click(function(){
    fileInput.click();}).show();

演示


查看完整回答
反对 回复 2019-08-17
?
慕斯王

检查Reigels的想法,之后这一次,我写了这个简单的解决方案,以一个造型的通病type="file"输入字段(测试它在Firefox,Safari和Chrome)。

<div style="position:relative;"><div id="file" style="position:absolute;">Click here to select a file</div><input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;"></div>

那么你当然可以根据需要设置“文件”div的样式。

如果您想使用type="text"输入而不是div,只需更改innerHTMLvalue

<div style="position:relative;"><input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file"><input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;"></div>

这是我使用jQuery的原始答案:

<div style="position:relative;"><div id="file" style="position:absolute;">Click here to select a file</div><input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());"></div>


查看完整回答
反对 回复 2019-08-17
?
沧海一幻觉

以下是使用HTML,CSS和Javascript(没有任何框架)的方法:

我们的想法是<input type='file'>隐藏按钮并使用<div>您设置为文件上传按钮的假人。点击这个<div>,我们称之为隐藏<input type='file'>

演示:

// comments inline
document.getElementById("customButton").addEventListener("click", function(){
  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button});document.getElementById("fileUpload").addEventListener("change", function(){
  var fullPath = document.getElementById('fileUpload').value;
  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name
  document.getElementById("fileName").innerHTML = fileName;  // display the file name}, false);
body{
  font-family: Arial;}#fileUpload{
  display: none; /* do not display the actual file upload button */}#customButton{  /* style the dummy upload button */
  background: yellow;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
  color: red;}
<input type="file" id="fileUpload"> <!-- actual file upload button --><div id="customButton">Browse</div>  <!-- dummy file upload button which can be used for styling ;) --><span id="fileName"></span> <!-- the file name of the selected file will be shown here -->


查看完整回答
反对 回复 2019-08-17

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信