怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式

前言

文件上传用途非常广泛，浏览器自带文件控件不太美观，很多时候不能满足需求，需要自定义input [type=file]的样式。

不同浏览器的file控件表现形式不一样

火狐

谷歌

不同浏览器的file控件基于鼠标点击的响应不一样

IE11，谷歌，火狐中单击file控件文本区域可以弹出文件选择框，而ie10及以前版本则需要双击file控件的文本区域

设置input的font-size属性，各个浏览器的控件大小均发生了变化

font-size ：该属性规定 input元素中文本的尺寸大小。

input file按钮美化

#input-file input{

font-size: 20px;

border: 1px solid pink;

}

IE,谷歌,火狐浏览器，file控件大小均发生了变化，以谷歌为例：

input file按钮美化

思路：采用a标签自定义一个我们需要的按钮，然后包含一个真正起作用的input[type=file]控件

要点：

1. 为包含input元素的a标签设置overflow:hidden，用来隐藏超出此区域的控件内容

2. input采用绝对定位，使input控件的右上和a标签的右上对齐(因为由上面内容可知，不管对于哪种浏览器，点击右侧内容，均单击就可以弹出文件选择框)

代码如下

input file按钮美化

#input-file a{

display:inline-block;

width:100px;

height:40px;

margin: 100px 300px;

background:green;

position:relative;

overflow:hidden;/*隐藏超出区域，此属性很重要*/

}

#input-file a:hover{

background:pink;

}

#input-file input{

position:absolute;

right:0;

top:0;

//要保证file控件大小大于a标签的大小

font-size:40px;

/*设置为透明*/

filter:alpha(opacity=0); /* IE */

-moz-opacity:0; /* 老版Mozilla */

-khtml-opacity:0; /* 老版Safari */

opacity: 0;

}

浏览

本文固定链接：心知博客 » 使用css自定义input file浏览按钮样式

本站内容除特别标注外均为原创，欢迎转载，但请保留出处！

怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式相关推荐

自定义 input[type=checkbox]的样式
自定义 input[type="checkbox"]的样式对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框 ...
button按钮样式_一篇文章带你了解CSS3按钮知识
在实际开发中,按钮的应用是必不可少.使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式. 一.平面样式CSS按钮平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 ...
TortoiseGit 将工作区变动文件提交本地仓库_入门试炼_04
文章目录一.将工作区代码提交到本地仓库 1.1. 新增/改动文件 1.2. 将变动文件提交本地仓库 1.3. 填写提交注释说明一.将工作区代码提交到本地仓库 Git的使用类似TFS.SVN等源代码 ...
css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
css改火狐滚动条样式_纯css美化滚动条样式
知乎的编辑器对于复制转发文章来说特别不友好(直接复制后代码乱码,字体变化,表格数据丢失),不太想过多重复编辑,只会编辑转发部分到这上面来,如感觉还不错,请跳转到:https://www.emperin ...
javafx css样式_使用CSS设置JavaFX饼图样式
javafx css样式渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在2 ...
Java怎么做置顶_[Java教程]自定义置顶TOP按钮
[Java教程]自定义置顶TOP按钮 0 2015-12-10 22:00:13 简述一下,分为三个步骤: 1. 添加Html代码2. 调整Css样式3. 添加Jquery代码具体代码如下: #GoT ...
css复选框样式_使用CSS样式复选框
css复选框样式 Introduction: 介绍: Sometimes we want to develop a website or web page that would contain a f ...
angular文件上传php,Angular2里获取（input file）上传文件的内容的方法
最近在用Angular2,需要有一个上传文件的功能,但是又不想用库,所以直接用原生的input file 标签. 然后想获取上传的内容,于是先想了个愚蠢的方法,先通过id获取到这个input标签,然后 ...

怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式

怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式相关推荐

最新文章

热门文章