卡卡網(wǎng)

input按鈕默認(rèn)樣式不好看，多數(shù)情況下要對(duì)其樣式進(jìn)行美化，file-selector-button文件選擇器按鈕也不例外。文件選擇器按鈕用于在網(wǎng)頁上傳文件時(shí)瀏覽選擇本地文件。本文將通過一示例顯示如何美化文件選擇器按鈕的樣式。

效果圖

demodownload

示例介紹

文件選擇器按鈕樣式為漸變，鼠標(biāo)懸停時(shí)過渡到另一個(gè)漸變樣式。

HTML代碼

<input type="file">

HTML代碼只有一個(gè)input標(biāo)簽，type屬性為file。

CSS代碼

input::file-selector-button {
  background-image: linear-gradient(
    to right,
    #ff7a18,
    #af002d,
    #319197 100%,
    #319197 200%
  );
  background-position-x: 0%;
  background-size: 200%;
  border: 0;
  border-radius: 8px;
  color: #fff;
  padding: 1rem 1.25rem;
  text-shadow: 0 1px 1px #333;
  transition: all 0.25s;
}
input::file-selector-button:hover {
  background-position-x: 100%;
  transform: scale(1.1);
}

我們對(duì)input::file-selector-button屬性進(jìn)行樣式設(shè)置，并對(duì)鼠標(biāo)懸停動(dòng)作:hover設(shè)置其轉(zhuǎn)換動(dòng)畫transform。

CSS::file-selector-button是HTML中<input type="file">選擇的偽元素。

input::file-selector-button {
  background-color: #f8a100;
}

你實(shí)際上不必在偽元素前面指定元素：

/* 這個(gè)有效 */
input[type="file"]::file-selector-button{ }

/* 但這個(gè)更簡(jiǎn)潔 */
::file-selector-button{ }

當(dāng)然，這將全局設(shè)置所有文件選擇器按鈕的樣式。

::file-selector-button按鈕的樣式設(shè)置是有限的，我們無法為按鈕旁邊的占位符“未選擇文件”文本設(shè)置樣式。

另外，我們不能為::file-selector-button按鈕設(shè)置動(dòng)畫，這可能與@keyframes動(dòng)畫方式不相容有關(guān)。

瀏覽器支持

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

Chrome

Firefox

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

總結(jié)

本文介紹了file-selector-button文件選擇器按鈕的漂亮樣式，并了解了對(duì)其樣式設(shè)置的有限性。

標(biāo)簽: 文件選擇器按鈕  file-selector-button