ファイルアップロードボタンのスタイルを変更する方法

はじめに

ファイルアップロードボタンのスタイルを変更しますか？アップロードにモダンまたはクラシックのどちらのスタイルを使用している場合でも、常にデフォルトのスタイルが適用されます。

CSSのパワーを使えば、アップロードフィールドをあなたの会社のブランディングに合わせてパーソナライズすることができます！さっそく見ていきましょう！

フォームの作成

まず、新しいフォームを作成し、フィールドを追加します。

フォームの作成にヘルプが必要な場合は、こちらの便利なドキュメントをご覧ください。

モダンスタイルの使用

ファイルアップロードフォームフィールドを追加したら、モダンスタイルとクラシックスタイルのどちらを使用するかを決定する必要があります。このチュートリアルでは、両方に必要な CSS を説明します。

しかし、このセクションでは、このフィールドのモダンスタイルのスタイリングから始めます。これを設定するには、フォームのファイルアップロードを選択し、詳細設定タブをクリックします。スタイル]ドロップダウンで [モダン] を選択したことを確認し、フォームを保存します。

モダンスタイルのためのCSSの追加

モダンスタイルファイルのアップロードでスタイルを設定する場合は、このCSSをサイトに追加してください。サイトにカスタム CSS を追加する方法と場所についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

.dz-message svg {
    display: none;
}

.modern-title::before {
  content: '';
  /*Change the URL below to point to the image you would like to display*/
  background: url(https://myexample-site.com/img/my-new-file-upload-image.svg);
  width: 100px;
  height: 35px;
  background-repeat: no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wpforms-uploader.dz-clickable {
    min-height: 100px;
}

このCSSを追加することで、File Uploadfor theModernのスタイルが、あなたの会社のブランディングに特化したものになります。

クラシックスタイルの使用

モダン・スタイルで行ったように、クラシック・スタイルでもスタイリングを調整することができる。

このセクションでは、フィールドのAdvancedタブにあるStyleドロップダウンからClassicを選択する必要があります。

クラシックスタイルのためのCSSの追加

クラシック・スタイル・ファイルをアップロードする場合は、このCSSをサイトに追加してください。カスタム CSS をサイトに追加する方法と場所については、このチュートリアルを参照してください。

input[type="file"] {
  outline: none !important;
  padding: 4px !important;
  margin: -4px !important;
}

input[type="file"]:focus-within::file-selector-button,
input[type="file"]:focus::file-selector-button {
  outline: 2px solid #0964b0 !important;
  outline-offset: 2px !important;
}

input[type="file"]::before {
  top: 16px !important;
}

input[type="file"]::after {
  top: 14px !important;
}

input[type="file"] {
  position: relative !important;
}

input[type="file"]::file-selector-button {
  width: 136px !important;
  color: transparent !important;
}

input[type="file"]::before {
  position: absolute !important;
  pointer-events: none !important;
  left: 40px !important;
  color: #0964b0 !important;
  content: "Upload File" !important;
}

input[type="file"]::after {
  position: absolute !important;
  pointer-events: none !important;
  left: 16px !important;
  height: 20px !important;
  width: 20px !important;
  content: "" !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E") !important;
}

input[type="file"]::file-selector-button {
  border-radius: 4px !important;
  padding: 0 16px !important;
  height: 40px !important;
  cursor: pointer !important;
  background-color: white !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05) !important;
  margin-right: 16px !important;
  transition: background-color 200ms !important;
}

/* hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6 !important;
}

/* active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb !important;
}

これで完了です！これで、ファイルアップロードボタンのスタイルを簡単に更新できます。ファイルアップロード用に特定のディレクトリを指定したいですか？ファイルアップロード用に特定のディレクトリを定義する方法」のチュートリアルをご覧ください。