CSS优化上传按钮样式

input[type=file] {
display: none;
}
.upload-btn {
display: inline-block;
padding: 8px 20px;
background-color: #33aaff;
color: #fff;
cursor: pointer;
}
.upload-btn:hover {
background-color: #2684ff;
}
.upload-btn:active {
background-color: #1c67cc;
}

上传文件的功能在很多网站上都是必不可少的，但是默认的上传按钮样式却很难看，不符合网页设计的要求。因此，我们可以使用CSS来美化上传按钮，让它看起来更加美观和实用。

首先，我们需要将默认的上传按钮隐藏掉，使用CSS的display属性来设置为none，然后通过创建一个新的按钮来替代它。

input[type=file] {
display: none;
}

接着，我们创建一个新的按钮，并将它设置为inline-block，这样它就位于文本流中，并具有块状元素的属性。除此之外，我们还设置了padding来增加按钮的大小，以及背景颜色和文本颜色来使其更加醒目。

.upload-btn {
display: inline-block;
padding: 8px 20px;
background-color: #33aaff;
color: #fff;
cursor: pointer;
}

当用户悬停鼠标在按钮上时，我们可以改变它的背景颜色，让它显得更加活泼。

.upload-btn:hover {
background-color: #2684ff;
}

当用户点击按钮时，我们可以再次改变它的背景颜色，让它看起来更加互动。

.upload-btn:active {
background-color: #1c67cc;
}

通过这样的CSS优化，在上传文件时，我们可以使按钮更加美观和实用，也会给用户带来更好的使用体验。