style of upload field WordPress

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/ ]