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

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>复制