编程 巧用opacity实现input的文件上传美化

2024-11-19 00:06:05 +0800 CST views 2601
正常我们的上传标签都是这样写的<input  type="file" accept="image/*" />
这样显示出来的原生按钮不仅不利于用户体验。我们自己都觉得丑。所有我们需要进行美化下。

html代码

<div class="box" id="s1">
	<input data-id="s1" type="file" accept="image/*" class="upload-file" data-type="0">
	<div class="images">
		<i class="iconfont icon-shenfenzhengzhengmian"></i>
	</div>
	<div class="about">
		身份证头像面
	</div>
</div>
<div class="box" id="s2">
	<input data-id="s2" type="file" accept="image/*" class="upload-file" data-type="1">
	<div class="images">
		<i class="iconfont icon-shenfenzhengfanmian"></i>
	</div>
	<div class="about">
		身份证国徽面
	</div>
</div>

css代码

.iconfont{
        font-size: 100px;
    }
    .images img{
        width:auto;
        height:100px;
        overflow: hidden; 
    }
    .box{
        position: relative;
    }
    .upload-file{
        position: absolute;
        width:100%;
        background-color: sienna;
        height: 100%;
        left: 0;
        top: 0;
        opacity: .01; 
        filter: Alpha(opacity=1);
        
    }

实际案例

2.png

1.png

复制全文 生成海报 前端开发 用户界面 网页设计

推荐文章

前端如何优化资源加载
2024-11-18 13:35:45 +0800 CST
Golang Select 的使用及基本实现
2024-11-18 13:48:21 +0800 CST
JavaScript设计模式:装饰器模式
2024-11-19 06:05:51 +0800 CST
PHP 8.4 中的新数组函数
2024-11-19 08:33:52 +0800 CST
平面设计常用尺寸
2024-11-19 02:20:22 +0800 CST
使用 node-ssh 实现自动化部署
2024-11-18 20:06:21 +0800 CST
程序员出海搞钱工具库
2024-11-18 22:16:19 +0800 CST
向满屏的 Import 语句说再见!
2024-11-18 12:20:51 +0800 CST
Vue3 组件间通信的多种方式
2024-11-19 02:57:47 +0800 CST
imap_open绕过exec禁用的脚本
2024-11-17 05:01:58 +0800 CST
Rust 与 sqlx:数据库迁移实战指南
2024-11-19 02:38:49 +0800 CST
Linux查看系统配置常用命令
2024-11-17 18:20:42 +0800 CST
Vue3中如何处理权限控制?
2024-11-18 05:36:30 +0800 CST
Redis和Memcached有什么区别?
2024-11-18 17:57:13 +0800 CST
程序员茄子在线接单