【CSS】表单input文件上传样式优化

最新推荐文章于 2024-07-03 15:25:11 发布

陳大大丶

最新推荐文章于 2024-07-03 15:25:11 发布

阅读量1k

点赞数 1

分类专栏： CSS 文章标签： css 前端 css3 html

本文链接：https://blog.csdn.net/u010587546/article/details/128387183

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML5的文件上传组件，并通过CSS进行样式优化，实现基本样式到美观样式的转变。通过将input[type='file']元素进行相对定位，再配合透明度设置，创建了一个具有自定义颜色、边框和圆角的文件上传按钮。

摘要由CSDN通过智能技术生成

HTML5 提供的文件上传组件基本样式

<input type="file"/>

在这里插入图片描述

使用css对样式进行优化

<div class="file-upload">
	<label>文件上传</label>
	<input type="file"/>
</div>

<style>
        .file-upload{
            display: inline-block; 				/* 块元素转换为行内元素 */
            position: relative; 				/* 父元素使用相对定位, 方便子元素进行绝对定位 */
            width: 80px; 						/* 设置元素宽度, 子元素要保持一致 */
            height: 30px; 						/* 设置元素高度,子元素要保持一致 */
            line-height: 30px; 					/* 保证label标签内容垂直居中 */
            text-align: center; 				/* 保证label标签内容水平居中 */
            border-radius: 4px; 				/* 圆角样式 */
            color: skyblue; 					/* 字体颜色 */
            border: 1px solid deepskyblue; 		/* 边框 */
        }
        .file-upload input{
            position: absolute; 				/* 子元素绝对定位 */
            top:0;
            left:0;
            width: 80px;
            height: 30px;
            opacity: 0; 						/* 设置透明 */
        }
</style>