input file 美化

        <input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化。找了很多资料,目前发现以下方式是最简单的美化方式。

1.将file input用label包裹起来,然后给这个label增加我们想要的样式。

2.给input增加样式:

style="left:-9999px;position:absolute;"

3.label内增加显示文本

<span>上传文件</span>

完整代码:(点击查看demo)

<label class="upload_btn" for="file">
    <input type="file" id="file" name="" style="left:-9999px;position:absolute;">
    <span>上传文件</span>
</label>

       这是label标签特性,可将事件传递到目标标签,如不加for属性,默认传递到第一个标签。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • C语言中把数字转换为字符串 【转】

    在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望。由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者...

    用户2038589
  • springCloud学习3(Netflix Hystrix弹性客户端)

    springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33

    用户2038589
  • springCloud学习3(Netflix Hystrix弹性客户端)

      所有的系统都会遇到故障,分布式系统单点故障概率更高。如何构建应用程序来应对故障,是每个软件开发人员工作的关键部分。但是通常在构建系统时,大多数工程师只考虑到...

    用户2038589
  • 使用form上传文件到application server的另一种办法

    界面如下: 使用fileupload控件选择local file后,点击Stash the file上传:

    Jerry Wang
  • HTML.Label

    如果用户单击 label,浏览器会把焦点传送给相关的输入控件 ,这一点对于复选框和单选按钮特别有用,

  • 快速上手 fastText 工具解决文本分类

    前文已经介绍了 fastText 开源工具的安装,接下来使用 fastText 工具来解决具体的文本分类问题(fastText 还可以训练词向量,此时 fast...

    触摸壹缕阳光
  • SDNLAB技术分享(十六):SPRING/Segment Routing

    前言:本人的所有技术分享仅以传播IT行业的通用网络技术知识为目的, 不包含任何厂家特定的软硬件功能/特性的实现细节以及roadmap等厂家私密信息. 本次分享借...

    SDNLAB
  • 表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大

    在移动平台页面的开发中,为了让表单项的可点区域变大而更好的操作,label可提供相应的便利。

    书童小二
  • <label>标签

    <label> 标签素定义 <input> 元素的标注。该元素不会显示任何特殊效果,若在 <label> 元素内点击文本,就会触发该元素,即用户点击该元素,浏览...

    Html5知典
  • Python 中 Mock 到底该怎么玩?一篇文章告诉你(超全)

    微服务架构下,由于各类服务开发进度的不一致,导致联调工作经常会存在不确定性,进而导致项目延期

    AirPython

扫码关注云+社区

领取腾讯云代金券