开发者社区> 问答> 正文

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

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

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

展开
收起
杨冬芳 2016-06-14 13:59:46 2393 0
1 条回答
写回答
取消 提交回答
  • IT从业

    以下是对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>

    screenshot

    2019-07-17 19:37:26
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
<img src...[mitah].1536575523.pdf 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载