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

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

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

写了一个带有表单的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文件上传按钮的方法,” 的相关文章

原创(禁止ping命令操作)linux如何停止ping,linux禁ping操作的方法,linux禁ping操作的方法,

免费领取腾讯云服务器! linux中可以通过ssh命令来禁止其它机器来ping自己,下面是配置方法,大家可以参考一下。 linux中禁ping的方法 方法1 临时禁ping,系统重启后失效,已在ubuntu系...

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

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

干货分享(php输出json中文乱码)json数据中文乱码怎么办,解决 php json中文乱码的问题,解决 php json中文乱码的问题,

免费领取腾讯云服务器! php输出使用json_encode函数生成的json数据的时候,发现数据中的中文被转义成了unicode编码,如果使用ajax请求的json数据还好一点,浏览器会自动将unicode编码转义回来,但如果直接输出到浏览器上,那就会直...

这都可以?(常用正则表达式大全)常用正则表达式大全图片,常用正则表达式大全,常用正则表达式大全,

免费领取腾讯云服务器! 网上收集了一些常用的正则表达式,基本上都全,需要的可以拿去了。 关于号码的正则表达式 QQ号正则表达式 BASIC /^[1-9][0-9]{...

墙裂推荐(js判断ip是否合法)判断ipv4地址是否合法,js代码判断IP地址的合法性(只支持IPV4),js代码判断IP地址的合法性(只支持IPV4),

免费领取腾讯云服务器! 客户定制了一个IPV4格式的IP地址在线查询的工具,需要用户在前台输入IPV4格的IP地址,为了防止用户输入的IPV4格式的IP错误,又减少后端的服务器资源的浪费,就想到了先在前台用JS脚本判断一下,用户输入的IPV4地址是否合法。...

居然可以这样(css画爱心)爱心图形创意,CSS实现爱心形状动态加载条的方法,CSS实现爱心形状动态加载条的方法,

居然可以这样(css画爱心)爱心图形创意,CSS实现爱心形状动态加载条的方法,CSS实现爱心形状动态加载条的方法,

免费领取腾讯云服务器! 下面记录一个利用纯CSS样式代码实现一个爱心形状的动态加载条,用到了CSS中的动画效果与伪元素样式,有一定的参考价值。感兴趣的小伙伴,不妨测试一下。 纯CSS实现心形加载动画效果 1、动画效果...

发表评论

访客

看不清,换一张

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