CSS でファイルアップロードボタンのスタイルをカスタマイズするには？
自分のウェブサイトにフォームを置くなら、アップロードボタンもほかのボタンと同じ見た目にしたいものです。Google Forms のファイルアップロードボタンは独自の見た目のままで、自分のスタイルを入れる場所がありません。また、埋め込んだ Google Form はサイトの CSS が届かない iframe の中にあります。Formfacade なら、フォームの設定の Advanced タブで addfile クラスの CSS を書けます。背景、枠線、フォント、色を指定できます。フォームのアップロードボタンはそれに合わせて変わり、回答は引き続きあなたの Google Form に届きます。
さっそく始めましょう。フォームを作成して、以下の手順に沿って進めてください。
カスタム CSS を書くには？
- 開いたページでフォームに名前を付け、Create form をクリックしてから Proceed をクリックします。
- 「Do you want to preview this form?」と表示されたら、No をクリックします。
- Edit ページで、フォームのタイトルをクリックし、歯車アイコンをクリックします。
- Advanced タブを選び、カスタム CSS を追加します。
- 下のように「addfile」クラスに CSS のスタイルを適用すれば、背景色、枠線、フォント、文字色などを変更できます。最後に Save ボタンをクリックします。
フォームのアップロードボタンが、あなたのスタイルに変わります。
まとめ
Google Forms にはアップロードボタンのスタイルを変える場所がないため、ウェブサイト上で浮いてしまいます。Formfacade なら、フォームの Advanced 設定で addfile クラスの CSS を書くだけで、ボタンにあなたのスタイルが反映されます。フォームを作成して、上の手順を完了してください。ご不明な点があれば、サポートにご連絡ください。
最終更新：