卡卡網(wǎng)

file-selector-button文件選擇器按鈕也可以把樣式美化得很漂亮，并且設置一個好看的懸停效果。

效果圖

demodownload

示例介紹

通過純CSS設置file-selector-button文件選擇器按鈕的陰影框、背景色和鼠標懸停過渡效果。

HTML代碼

<input type="file" accept="image/*"/>

HTML代碼是一個input標簽，其type屬性值為file，accept屬性值為image/*。accept屬性設置文件選擇器打開對話框時默認顯示的文件類型，但你仍然可以在對話框中選擇“所有文件(*)”來顯示所有文件。

CSS代碼

::file-selector-button {
  font-size: 1.5rem;
  border: none;
  background: white;
  border: 1px solid var(--color);
  color: var(--color);
  transition: 1.3s;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  width: 13.5rem;
  height: 5rem;
  border-radius: 2rem;
}
::file-selector-button:hover, ::file-selector-button:focus {
  border-color: var(--hover);
  color: white;
}

::file-selector-button:hover,
::file-selector-button:focus {
  box-shadow: inset 15rem 0 0 0 var(--hover);
}

::file-selector-button偽元素設置文件選擇器按鈕的樣式。

::file-selector-button:hover設置鼠標懸停時的過渡動畫效果。

需要注意的是，::file-selector-button偽元素是不支持動畫屬性@keyframes的，所以的動畫過渡效果不能用@keyframes來完成。

瀏覽器支持

不是所有瀏覽器都支持::file-selector-button，并且，::file-selector-button在所支持的各個瀏覽器上，顯示樣式也可能不一樣。如本文的示例代碼，在chrome、firefox、IE上分別顯示如下。

Chrome

Firefox

IE11（不支持，，所以無樣式）

Safari、Chrome 和 Opera 的早期版本使用偽選擇器的前綴版本，::-webkit-file-upload-button，同樣，舊版本的 Edge 和 Internet Explorer 依賴于::-ms-browse，因此，如果你正在尋找一種可靠的方法來確保最大限度地支持瀏覽器，那么你可以使用以下代碼：

/* Safari, Chrome, 和 Opera */
input[type="file"]::-webkit-file-upload-button {
  background-color: #f8a100;
}
/* Edge 和 IE */
input[type="file"]::-ms-browse {
  background-color: #f8a100;
}
/* 標準 */
input[type="file"]::file-selector-button {
  background-color: #f8a100;
}

總結(jié)

本文通過示例介紹了file-selector-button文件選擇器按鈕如何設置陰影框、背景色，以及鼠標懸停過渡動畫效果，另外了解了文件選擇器的瀏覽器支持情況。

相關(guān)文章

• [示例]file-selector-button文件選擇器按鈕漂亮樣式

標簽: 文件選擇器按鈕  file-selector-button