为type=file的input标签制定样式—

为type=file的input标签制定样式

1. 概述
2. 实验
3. 解决方法与解析

1. 概述

在现在的前端开发中，为了开发的效率，大都会引入第三方库加快开发速度。查阅官方文档，一顿复制黏贴，是的，这就是面向百度、面向谷歌编程，但是基础总是重要的——本文章记录一下之前遇到的小坑，并对其进行解析。

2. 实验

实验目的：我们想要为type=file的input标签制定样式

默认的样式如图

<input type="file">

现在我们想要改成下图的效果

然后我们直接用行内样式来书写

<input type="file" style="background:#333;color: #fff;">

但是得到的结果如下图所示

这并不是我们想要的结果

3. 解决方法与解析

首先，你要知道 label与input是可以成对出现并且绑定的

用 for 绑定后，点击 label 和点击 input 的效果是相同的，点击 label 同样会触发“选择文件”的功能

所以我们这样写

<label for="btn">上传文件</label>
<input id="btn" type="file" style="display: none;">

这里把 input 设置成了不可见

然后对 label 加样式就可以了~

label 样式如下：

label {display: inline-block;padding: 0.3rem 1rem;background: #333;color: #fff;border-radius: 0.3rem;font-size: x-small;cursor: pointer;}

至于别的更好看的特效，那就自由发挥就行了，共勉~

为type=file的input标签制定样式——CSS基础相关推荐

html input选择框样式修改,关于type=file的input框样式修改小结
关于type="file"的input是啥? 这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传,反正比以前好玩多了. 上传按钮 ...
type=‘date’的input标签
最近在写一个手机网页时,要求使用原生的手机时间控件.需要使用input标签,之前并没有注意过type='date'的用法,在使用时也遇到了很多问题.在此一一总结一下: 1.首先调用浏览器自带时间控件, ...
Vue中使用file类型input标签，无法使用reset方法清空已经选择的文件【简单粗暴的解决方案】
这是在一个vue+springboot的小项目中遇到的问题,如图: 看了其他大佬的文章,看到了不少解决方案,但是无济于事,我这里依然报错,我一不做二不休直接提供一个是十分暴力的解决方案下面这个是两 ...
html input文本框样式,css设置input文本框样式代码实例_html/css_WEB-ITnose
css设置input文本框样式代码实例: 使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如 ...
html input文本框样式,css 定义input文本输入框样式
摘要腾兴网为您分享:css 定义input文本输入框样式,找乐助手,长江e号,一点英语,天天爱等软件知识,以及多功能盒子,方寸天地,斗音,蚊声,奶牛牧场,聚好商城,滞纳金计算器,反p2p终结者,lo ...
修改input标签输入样式
去掉input自带的边框: border-style:none; 修改input输入的文字样式: input{font-size: 24px;color:#5d6494; } 修改input框中占位符 ...
php input框圆角样式,CSS如何实现边框圆角
CSS实现边框圆角需要用到CSS中的border-radius属性,下面我们就来看看CSS实现圆角边框的详细内容. 我们下来看一个没有圆角的边框实现代码这是一个框架效果如下: 接下来我们就来具体看 ...
HTML5网页设计样式-CSS基础知识
CSS概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页内容的外观(样式),并允许将样式信息和网页内容分离的一种标记语言. HTML与CSS的关系:&quo ...
css伪元素实现小圆点样式——css基础积累
最近在做后台管理系统,遇到一个需求,需要在菜单中添加一个小圆点样式.此时可以通过css伪元素样式来实现. .parent-node {font-size: 14px;color:#999999;&am ...

为type=file的input标签制定样式——CSS基础

为type=file的input标签制定样式

1. 概述

2. 实验

3. 解决方法与解析

为type=file的input标签制定样式——CSS基础相关推荐

最新文章

热门文章