当前位置:首页 > 电脑知识 > 正文内容

深度揭秘(用css美化html页面)html字体美化,CSS美化html文件上传按钮的方法,CSS美化html文件上传按钮的方法,

sauo3年前 (2022-09-17)电脑知识90

写了一个带有表单的html页面,发现原生的 input 文件上传输入框样式太丑了,就琢磨着自己写个美化的样式,下面就是 html input 文件上传样的美化方法,单纯的只用CSS实现,很简单的。

CSS 美化input上传按钮样式的方法

美化实现逻辑:

1、用 div 元素写一个美化的上传按钮

2、将 input 上传按钮的透明度设置为 0 ,并将其绝对定位到 div 元素上方即可

先上示例演示图片:

示例代码:

Markup
<style> .filediv{ position: relative; } .filediv input{ opacity: 0; width: 100px; height: 35px; position: absolute; left: 0; top: 0; z-index: 99; } .filediv div{ height: 35px; line-height: 35px; background-color: #03a9f4; color: #fff; width: 100px; text-align: center; font-size: 14px; position: absolute; top: 0; left: 0; z-index: 98; } </style> <!-- 飞鸟慕鱼博客 http://feiniaomy.com --> <form name="form1" id="form1"> <div class="filediv"> <input type="file" id="btn_file" name="file"></input> <div>上传文件</div> </div> </form>复制

本文链接:http://blog.sauo.top/?id=308 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=308

分享给朋友:

“深度揭秘(用css美化html页面)html字体美化,CSS美化html文件上传按钮的方法,CSS美化html文件上传按钮的方法,” 的相关文章

新鲜出炉(ubuntu系统与centos系统区别)ubuntu还是centos,centos系统与ubuntu系统的区分,centos系统与ubuntu系统的区分,

免费领取腾讯云服务器! Linux的发行版有很多,而我们经常使用的为centos与ubuntu,下面这篇博文就说说这两个系统的发源与区别。 CentOS CentOS(Community Enterprise Operati...

这都可以(PHP百度百科)pHp是什么,php中关于strtotime函数31日取前几个月日期的BUG,php中关于strtotime函数31日取前几个月日期的BUG,

免费领取腾讯云服务器! 在使用php脚本中的 strtotime 函数取前几个月的日期时,发现每到31日时,取出的前几个月的日期都会出现错误。仔细检查了一下,发现在利用 strtotime 函数取前几个月的日期时,给 strtotime 函数的参数并不规范...

一篇读懂(PHP for循环)php跳出循环的语句,php中的几种循环语句,php中的几种循环语句,

免费领取腾讯云服务器! 列举几种php脚本中常用的几种循环语句,比如,for,foreach,do....while 等。 php for循环 for循环在很多语言中都经常用到,比如js语言,c语言,java语言等。...

全程干货(查看php是否启动)查看php是否支持rar解压,查看php是ts版本还是nts版本的方法,查看php是ts版本还是nts版本的方法,

全程干货(查看php是否启动)查看php是否支持rar解压,查看php是ts版本还是nts版本的方法,查看php是ts版本还是nts版本的方法,

免费领取腾讯云服务器! 今天有用户来询问php的ts版本与php的nts版本的区别是什么,怎么去查看自己安装的php服务是ts版本还是nts版本,下面博文就来详细的说一下。 php ts版本与nts版本的区别 php官方提供...

这都可以(php保存网络图片到本地)php下载图片到本地,php保存图片到本地的方法,php保存图片到本地的方法,

免费领取腾讯云服务器! 下面列几种网上收集的利用php脚本将远程图片保存至本地的方法,各位自行测试代码是否可用,另外php保存远程图片到本地并不能确保百分百的一定会拉取到远程图片的数据。 php保存远程图片到本地的方法 方法...

难以置信(php错误日志在哪里)PHP 日志,php设置错误日志的方法,php设置错误日志的方法,

难以置信(php错误日志在哪里)PHP 日志,php设置错误日志的方法,php设置错误日志的方法,

免费领取腾讯云服务器! php设置错误日志需要在php配置文件php.ini中设置,只需要简单的几步设置就可以实现,下面就来详细的说一下。 php设置错误日志的方法 1、打开php的配置文件,php.ini...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。