Ask your WordPress questions! Pay money and get answers fast! (more info)

style of upload field WordPress

  • SOLVED

Hello,

I use the upload field in the plugins formidable an contact form 7. in both plugins this field has the same style, so I think it is defined in the WP theme.
My problem: the field looks like the field "add image" on this page. But it is very long, too long for displaying it in a widget.
How can I display it in 2 rows?

thank you for answering

Wolfgang Woide

Answers (1)

2013-01-05

Dbranes answers:

Hi, here are some links that share light on the problem of styling the <strong>input[type=file]</strong> in general (not Wordpress related) and possible workarounds:


[[LINK href="http://www.quirksmode.org/dom/inputfile.html"]]http://www.quirksmode.org/dom/inputfile.html[[/LINK]] (very old but informative)

[[LINK href="http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript"]]http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript[[/LINK]]

[[LINK href="http://stackoverflow.com/a/4909242"]]http://stackoverflow.com/a/4909242[[/LINK]]



---

But if you want to reduce the width of the input field, then you can do so with css:

You might have this kind of code in CF7:

[file file-61 class:myfileupload]

where <strong>class:myfileupload</strong> defines the classname.

Then you could use e.g.

.wpcf7-form .myfileupload {
width: 200px !important; /*adjust this value to fit your widget width */
margin: 10px 0 10px 0;
}


and place it for example in your style.css file or directly into your CF7 form with style tags.

---

This might not work in all browser so you can use the size attribute.

if you want to set <strong>size="40"</strong>, you can use:

[file file-61 class:myfileupload 40/ ]