温馨提示×

温馨提示×

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

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

怎么用纯css实现input[type=file]的样式控制

发布时间:2022-01-20 17:11:46 来源:亿速云 阅读:372 作者:iii 栏目:web开发

今天小编给大家分享一下怎么用纯css实现input[type=file]的样式控制的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

  如果您搜索有关如何进行完全外观控制的常见问题的解决方案,则结果可能适合以下3个类别之一:<inputtype="file"/>

  需要Javascript。

  在主浏览器中不起作用。

  实际上并没有提供完整的风格控制。

  上述三个肯定适合我在网上找到的每一个答案。但你可以用纯CSS做到这一点。它需要一个包装元素来挂钩样式(输入本身是隐藏的,因为它的样式是如此有限/限制)。语义上的概念可能想要把这个变成<label/>-顺便说一下,每个元素有多个标签没有错的。我们看看从下面这个示例

  代码如下:

  <!DOCTYPEhtml>

  <html>

  <head>

   <title></title>

   <styletype="text/css">

  .fileContainer{

  overflow:hidden;

  position:relative;

  }

  .fileContainer[type=file]{

  cursor:inherit;

  display:block;

  font-size:999px;

  filter:alpha(opacity=0);

  min-height:100%;

  min-width:100%;

  opacity:0;

  position:absolute;

  right:0;

  text-align:right;

  top:0;

  }

  /*Examplestylisticflourishes*/

  .fileContainer{

  background:red;

  border-radius:.5em;

  float:left;

  padding:.5em;

  }

  .fileContainer[type=file]{

  cursor:pointer;

  }

  }

  </style>

  </head>

  <body>

  <labelclass="fileContainer">

  点击这里实现文件上传!

  <inputtype="file"/>

  </label>

  </body>

  </html>

怎么用纯css实现input[type=file]的样式控制

以上就是“怎么用纯css实现input[type=file]的样式控制”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

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

AI