{"id":15087,"date":"2015-03-12T11:15:56","date_gmt":"2015-03-12T11:15:56","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=15087"},"modified":"2023-11-24T11:00:03","modified_gmt":"2023-11-24T11:00:03","slug":"how-to-style-file-upload-buttons-on-your-online-forms","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/","title":{"rendered":"How to style file upload buttons on your 123FormBuilder online forms?"},"content":{"rendered":"\n<p>To style file upload buttons on your <a href=\"\/\" target=\"_blank\" rel=\"noreferrer noopener\">online form<\/a>, access the <b>Form Editor<\/b> and go to the <b>Design<\/b> section. Afterward, click on <b>Add custom CSS<\/b> and paste this ID to style the file upload default text:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-ui-role=ui-element][data-type=file] &gt; div[data-role=upload-overlay] &gt; div[data-role=placeholder]\n\n<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1024x573.png\" alt=\"Add custom CSS\" class=\"wp-image-47968\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1024x573.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-300x168.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-768x430.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1536x859.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8.png 1913w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Below are some examples:<\/p>\n\n\n\n<p>1. To change the color of the <b>Choose files or drag here<\/b> text:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-ui-role=ui-element][data-type=file] &gt; div[data-role=upload-overlay] &gt; div[data-role=placeholder] \n{ \n     color:#4169E1; \n}<\/pre>\n\n\n\n<p>Replace <em>#4169E1<\/em> with the hex code corresponding to the color you want.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-281.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"355\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-281-1024x355.png\" alt=\"File upload custom CSS\" class=\"wp-image-47969\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-281-1024x355.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-281-300x104.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-281-768x266.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-281-1536x532.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-281.png 1915w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>2. To change the file upload text with another image from an URL:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#form div[data-ui-role=ui-element][data-type=file] &gt; div[data-role=upload-overlay] &gt; div[data-role=placeholder] \n{\n      content: url('\/\/mydomain.com\/upload.png');\n}<\/pre>\n\n\n\n<p>Replace <em>\/\/mydomain.com\/upload.png<\/em> with the URL where your image is located.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-282.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"355\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-282-1024x355.png\" alt=\"File upload custom CSS\" class=\"wp-image-47971\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-282-1024x355.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-282-300x104.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-282-768x266.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-282-1536x532.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-282.png 1915w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To style file upload buttons on your online form, access the Form Editor and go to the Design section. Afterward, click on Add custom CSS and paste this ID to style the file upload default text: #form div[data-ui-role=ui-element][data-type=file] &gt; div[data-role=upload-overlay] &gt; div[data-role=placeholder] Below are some examples: 1. To change the color of the Choose files [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[125],"tags":[],"class_list":["post-15087","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tricks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to style file upload buttons? - 123FormBuilder Docs<\/title>\n<meta name=\"description\" content=\"Follow our documentation on how to style file upload buttons on your online form and learn from some simple CSS examples provided for you.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to style file upload buttons on your 123FormBuilder online forms?\" \/>\n<meta property=\"og:description\" content=\"Follow our documentation on how to style file upload buttons on your online form and learn from some simple CSS examples provided for you.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-12T11:15:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-24T11:00:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1024x573.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to style file upload buttons? - 123FormBuilder Docs","description":"Follow our documentation on how to style file upload buttons on your online form and learn from some simple CSS examples provided for you.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/","og_locale":"en_US","og_type":"article","og_title":"How to style file upload buttons on your 123FormBuilder online forms?","og_description":"Follow our documentation on how to style file upload buttons on your online form and learn from some simple CSS examples provided for you.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2015-03-12T11:15:56+00:00","article_modified_time":"2023-11-24T11:00:03+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1024x573.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/"},"author":{"name":"","@id":""},"headline":"How to style file upload buttons on your 123FormBuilder online forms?","datePublished":"2015-03-12T11:15:56+00:00","dateModified":"2023-11-24T11:00:03+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/"},"wordCount":100,"commentCount":0,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1024x573.png","articleSection":["CSS Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/","name":"How to style file upload buttons? - 123FormBuilder Docs","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1024x573.png","datePublished":"2015-03-12T11:15:56+00:00","dateModified":"2023-11-24T11:00:03+00:00","author":{"@id":""},"description":"Follow our documentation on how to style file upload buttons on your online form and learn from some simple CSS examples provided for you.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1024x573.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-8-1024x573.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-style-file-upload-buttons-on-your-online-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"How to style file upload buttons on your 123FormBuilder online forms?"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/15087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=15087"}],"version-history":[{"count":40,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/15087\/revisions"}],"predecessor-version":[{"id":47972,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/15087\/revisions\/47972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=15087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=15087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=15087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}