在上个需求中虽然功能完成了,但是原生input框的样式太简陋了,不符合页面的整体风格,而且上面三个输入框也没有对齐,所以需要美化样式
思路:input框可以先把之前的按钮透明度opacity设置为0,然后外层用div包裹。通过冒号对齐antd提供了相应方法,可以去antd搜索form表单
修改前:
修改后(这样模态框就好看多了)
js代码
<div className={styles.fileBox}>
<Input type="file" onChange={e => this.Upload(e)} accept='text/plain' className={styles.fileBtn}></Input>
<CloudUploadOutlined />上传txt文件
</div>
css
/* 原生的上传文件input样式修改 */
.fileBox{
margin-left: 99px;
/* */
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color: #fff;
background-color: rgb(49, 150, 233);
height: 32px;
border-radius: 3px;
vertical-align: bottom;
}
.fileBtn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter: alpha(opacity=0);
-moz-opacity:0;
opacity: 0;
cursor: pointer;
}