React(二)：input原先的样式太难看了，如何更改input的样式

本文主要是介绍React(二)：input原先的样式太难看了，如何更改input的样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

用一个盒子套着input，比如：
 

<div className={styles.CompreFileStyle}>点击上传文件<input className={styles.inputStyle} id="file" multiple type="file" onChange={this.fileChange} />
</div>

那么我们在更改样式的时候，只要给input加一个透明度为0，然后再子盒子填满父盒子就可，只要更改父盒子的样式，就可以达到我们想要的效果了，比如

.CompreFileStyle {display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;
}
.CompreFileStyle:hover {background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
}
.inputStyle {position: absolute;right: 0;top: 0;opacity: 0;  
}

好了，差不多就是这样了，lucky

这篇关于React(二)：input原先的样式太难看了，如何更改input的样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---