styling input file formbuilder

[sumpson]

Hello,

I have been trying to style the input type="file" at formbuilder for a long time and can't get it done.
does anyone have tips?

I've been googling and found this..

http://www.quirksmode.org/dom/inputfile.html

however I can't get that to work with formbuilder since I can't add html around the input type=file html.

I hope someone will be able to help me with this.

Cheers,

Philippe

[Dr.CSS]

If we had a link to look at the page good chance an answer would come, or at least some output from the page...

[tannos]

Give us more details or an example of your stylesheet otherwise we can't help

Have you modified the inline css in the template for srtart?

[sumpson]

Code: Select all

<style type="text/css">

.inputfield input{ border:none; background:#777; border-bottom:1px solid #000; width:400px; } .inputfield label{ display:none; }

</style>

Code: Select all

<div class="formbuilderform">
<div class=" inputfield">
<label for="m3fbrp__18">fileinput</label><input type="file" name="m3fbrp__18" size="10" maxlength="255" />
</div>
<div class="submit">
<input name="m3fbrp_submit" value="Submit Form" type="submit" class="fbsubmit" id="fbsubmit3"  />
</div>
</div>
</form>

I would like them to be the same in firefox plus be able to style the "bladeren" button.

Sorry about not being too clear earlier, hope this will work.

the form is located at www.basingcrew.com I have set up an example file input, working on a form in a restricted website.

[sumpson]

Well.. too accomplish what i want i need:

change this in formbuilder:

Code: Select all

<div class=" inputfield">
<label for="m3fbrp__18">fileinput</label><input type="file" name="m3fbrp__18" size="10" maxlength="255" />
</div>

into this:

Code: Select all

<div class="inputfield">
	<input type="file" class="file" />
	<div class="fakefile">
		<input />
		<img src="search.gif" />
	</div>
</div>

as explained in: http://www.quirksmode.org/dom/inputfile.html


Does anyone know how to accomplish this?

or is this more of a coding orientated question and should i try asking it in one of those forums.

[tannos]

I thnik it's possible by editing your CSS and your form template

[Dr.CSS]

Actually the form template is kind of hard to edit as it has a bunch of loops in it so you have a real hard time picking out just one particular div to change, that's why it has a class assignment in the advanced tab...

[sumpson]

Hmm, shame the class assignment is not enough for input type=file, hope someone will be able to help me with it

[Dr.CSS]

The class is enuf, as that is what is being used by IE6 (screenshot) firefox is ignoring it...

First take the CSS static file out of the form, as it throws errors in my html view, and add it to the other stylesheet where your existing form styles are...

For the hidden label fileinput you have a check in the second tab, iirc, that will make the label hidden so no need for display:none...

Once you have all the form CSS in one place try and coordinate them...