开发者社区> 问答> 正文

如何自定义 <input type="file" /> 样式

a123456678 2016-03-24 16:50:55 949

之前一直都是用CSS做一个按钮,然后将 透明度设置为0,覆盖在这个按钮之上,这样点击区域就能弹出选择文件的窗口。

可是,这种情况原按钮的hover和active效果就没了。
前几个月看到一篇文章,好像是控制input字体大小实现的,同时能保留后方的自定义按钮效果,不过找不到了。
不知道大家有什么解决方法?

前端开发
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:13:04

    以下是对bootstrap的file的包装,思路供参考。

    <input id="lefile" type="file" style="display:none">
    <div class="input-append">
       <input id="photoCover" class="input-large" type="text">
       <a class="btn" onclick="$('input[id=lefile]').click();">Browse</a>
    </div>
     
    <script type="text/javascript">
    $('input[id=lefile]').change(function() {
       $('#photoCover').val($(this).val());
    });
    </script>
    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程