温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Web页面中inputtype=file元素怎么用

发布时间:2021-11-12 15:46:50 来源:亿速云 阅读:206 作者:iii 栏目:开发技术

本篇内容主要讲解“Web页面中inputtype=file元素怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Web页面中inputtype=file元素怎么用”吧!

  Web页面中,在需要上传文件时基本都会用到inputtype=file元素,它的默认样式:chrome下:IE下:不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调。根据用户的需求,设计风格,改变其显示样式的场合就比较多了。如果,要像下面一样做一个bootstrap风格的上传按钮该如何实现。

  搭建上传按钮所需的inputtype=file元素

  复制代码代码如下:spanspan上传/spaninputtype="file"/span效果(chrome):现在看到的分两行显示。外围之所以没有换成div,是因为在IE7-浏览器中,只要不是设成inline,它的宽度全都会撑开到能撑到的宽度。如果设成inline,那元素的宽度就无法调整,所以这里用span然后设成inline-block能解决这样的问题。

  inputtype=file元素怎么用

  增加样式将两行变成一行

  复制代码代码如下:span"span上传/spaninputtype="file"/spancss:

  复制代码代码如下:.fileinput-button{position:relative;display:inline-block;}.fileinput-buttoninput{position:absolute;right:0px;top:0px;}效果:默认是没有浅蓝色边框,只有鼠标去点击后,才会显示,这里显示出来是为了看得清楚。通过将外围的span设成display:relative,将input设成display:absolute的方式让他们都脱离文档流。通过将input限定在外围的span中进行绝对定位的方式让本来两行显示的变成一行显示。实际上这里已经overflow了,真正的宽度是上传文字的宽度,修改fileinput-button样式增加overflow:hidden

  复制代码代码如下:.fileinput-button{position:relative;display:inline-block;overflow:hidden;}效果:很有意思,能看到上边后右边的蓝色边框了吧,其实就是把左边和下边的溢出部分给隐藏了。这时候用鼠标去点击上传两个字实际上是点在input上,能够显示打开对话框,因为显示层级上input要比上传更靠近用户。注意input定位中的right,为什么不用left定位。

到此,相信大家对“Web页面中inputtype=file元素怎么用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web
AI