你如何风格输入类型=“文件”按钮?

<输入类型=“文件” />


当前回答

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

我通常会使用简单的javascript来定制文件输入标记。一个隐藏的输入字段,点击按钮,javascript调用隐藏字段,简单的解决方案与任何css或一堆jquery。

<button id="file" onclick="$('#file').click()">Upload File</button>

其他回答

正如JGuo和CorySimmons提到的,您可以使用可样式标签的可点击行为,隐藏不太灵活的文件输入元素。

<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>

<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>

</body>
</html>

这里有一个交叉兼容的方法,可以在Chrome, Firefox, Safari和IE中工作。

$(window).on('resize',function() { var eqw = $('input[type=text]').width(); $('textarea').width(eqw - 32); $('.fileoutline').width(eqw); }).trigger('resize'); $('.file+.file').hide(); $(".file").click(function() { var input = $(this).next().find('input'); input.click(); }); $("input[id='file1']").change(function () { $('.file+.file').show(); var filename = $(this).val(); $('.filename1').html(filename); $('.file').find('span').html('CHANGE FILE'); }); $("input[id='file2']").change(function() { var filename = $(this).val(); $('.filename2').html(filename); $('.file').find('span').html('CHANGE FILE'); }); form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; } fieldset{border:0;margin:0;padding:0;} textarea{overflow: auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px 15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700 0.85em/2.2 'Futura Book',Arial,sans-serif;} input:focus{outline:none;} input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-bottom:1px solid #000;margin:0 0 28px;color:#000;} input:focus{outline:0;} .fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid #000;position:relative; } input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance: none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height: 100%;z-index:10; } .file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-transform:uppercase;color:#ffffff;text-align:center;width:35%;} .file,.filename1,.filename2 { font-weight:200;line-height:28px;} .filename1,.filename2 { width:375px;overflow:hidden;top:0;text-align:right;position:absolute;display:block;height:26px;color:#000;} .file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-radius:14px; } ::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-appearance: none;appearance: none; } #submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px #000;margin:35px 0;float:right;display:block;} <form action="" method="post" enctype="multipart/form-data"> <input type="text" name="email" id="email" placeholder="Email address" /> <input type="text" type="text" name="name" id="title" placeholder="Name" /> <textarea rows="7" cols="40" name="description" id="description" placeholder="Description"></textarea> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file1"><div class="filename1">NO CHOSEN FILE</div></div></div> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file2"><div class="filename2">NO CHOSEN FILE</div></div></div> <input type="submit" name="submit" value="Submit" id="submit"> </form>

我发现这种方法最简单、最轻便。

下面是工作示例:http://codepen.io/c3zar22/pen/QNoYXN

以下是解释:

this would be the markup: <label for="attach-project-file"> <span id="remove-project-file" class="close">x</span> <div class="filename" id="attached-project-file">Click to select a file</div> </label> <input id="attach-project-file" type="file"> hide the input in a hacky way like this: #attach-project-file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } style the corresponding label instead [for="attach-project-file"] { /* your styles here */ } style "remove file" button .close { font-size: 16px; padding: 10px; position: absolute; top: 0; right: 0; cursor: pointer; font-style: normal; } .filename element will be used to display the selected file below is the commented JS code needed (using jQuery) to make it work: var $attach = $('#attach-project-file'), $remove = $('#remove-project-file'), $name = $('#attached-project-file'); // initially hide the remove button $remove.hide(); // do this when file input has changed // i.e.: a file has been selected $attach.on('change', function() { var val = $(this).val(); if (val !== '') { // if value different than empty // show the file name as text // hide/text/fadeIn creates a nice effect when changing the text $name .hide() .text(val) .fadeIn(); // show the remove button $remove.fadeIn(); } else { // if value empty, means the file has been removed // show the default text $name .hide() .text('Click to select a file') .fadeIn(); // hide remove button $remove.fadeOut(); } }); // remove selected file when clicking the remove button // prevent click bubbling to the parent label and triggering file selection $remove.on('click', function(e) { e.preventDefault(); e.stopPropagation(); $attach .val('') .change(); // trigger change event });

这种方法为您提供了完全的灵活性!ES6 / VanillaJS!

html:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

这隐藏了输入文件按钮,但实际上是从另一个普通按钮点击它,显然您可以像设置其他按钮一样设置它的样式。这是除了无用的dom节点之外没有任何缺点的唯一解决方案。多亏了display:none;,输入按钮在DOM中不保留任何可见空间。

(我已经不知道该支持谁了。但我是从Stackoverflow网站的某个地方得到这个想法的。)

我在这里找到了一个使用jQuery的非常聪明的解决方案,它可以在所有旧浏览器和新浏览器中工作。 它使用实际的文件浏览按钮来处理所有样式和click()问题。 我做了一个简单的javascript版本:小提琴 解决方案非常简单,就像天才一样:让文件输入不可见,然后用一段代码把它放在mousecursor下面。

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
    <input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>
<script>
    function file_ho(e, o, a) {
        e = window.event || e;
        var x = 0,
        y = 0;
        if (o.offsetParent) {
            do {
            x += o.offsetLeft;
            y += o.offsetTop;
            } while (o = o.offsetParent);
        }
    var x1 = e.clientX || window.event.clientX;
    var y1 = e.clientY || window.event.clientY;
    var le = 100 - (x1 - x);
    var to = 10 - (y1 - y);
    document.getElementById('file_' + a).style.marginRight = le + 'px';
    document.getElementById('file_' + a).style.marginTop = -to + 'px';
    }
</script>
<style>
    .inp_field_12 {
        position:relative;
        overflow:hidden;
        float: left;
        width: 130px;
        height: 30px;
        background: orange;
    }
    .inp_field_12 span {
        position: absolute;
        width: 130px;
        font-family:'Calibri', 'Trebuchet MS', sans-serif;
        font-size:17px;
        line-height:27px;
        text-align:center;
        color:#555;
    }
    .inp_field_12 input[type='file'] {
        cursor:pointer;
        cursor:hand;
        position: absolute;
        top: 0px;
        right: 0px;
        -moz-opacity:0;
        filter:alpha(opacity=0);
        opacity: 0;
        outline: none;
        outline-style:none;
        outline-width:0;
        ie-dummy: expression(this.hideFocus=true);
    }
    .inp_field_12:hover {
        background-position:-140px -35px;
    }
    .inp_field_12:hover span {
        color:#fff;
    }
</style>