input.file式样美化

input.file是一个HTML表单中的输入框元素，用于上传文件。要对input.file的样式美化，可以通过CSS来实现。

首先，可以使用CSS选择器选择input[type="file"]，然后修改其样式。例如可以改变它的背景颜色、字体样式和大小等等。

接着，可以添加一个自定义的按钮，用于点击触发文件选择框的弹出。可以使用input[type="file"] + label来实现这一效果。当点击label时，会触发input.file的点击事件，从而弹出文件选择框。

为了隐藏默认的文件选择框，在样式中可以添加display: none;来隐藏它。这样用户将看不到默认的文件选择框，只能看到我们自定义的按钮。

当用户选择文件后，可以使用JavaScript来获取文件的名字并显示在自定义的按钮上。在input[type="file"]的change事件中，通过this.files[0].name来获取文件名，并将其显示在按钮上。

最后，为了让用户选择的文件名显示在按钮上之后不被遮挡，我们可以设置overflow: visible;或者增加padding-left来放置文件名。

综上所述，通过CSS来美化input.file的样式，通过JavaScript来获取并显示文件名，可以使input.file更加美观和用户友好。