Page 1 of 1
styling input file formbuilder
Posted: Thu Jul 03, 2008 10:14 pm
by 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
Re: styling input file formbuilder
Posted: Thu Jul 03, 2008 10:16 pm
by 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...
Re: styling input file formbuilder
Posted: Fri Jul 04, 2008 4:35 am
by 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?
Re: styling input file formbuilder
Posted: Fri Jul 04, 2008 8:58 am
by 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.
Re: styling input file formbuilder
Posted: Sat Jul 05, 2008 9:25 am
by 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.
Re: styling input file formbuilder
Posted: Sat Jul 05, 2008 1:45 pm
by tannos
I thnik it's possible by editing your CSS and your form template
Re: styling input file formbuilder
Posted: Sun Jul 06, 2008 4:07 am
by 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...
Re: styling input file formbuilder
Posted: Sun Jul 06, 2008 11:32 am
by sumpson
Hmm, shame the class assignment is not enough for input type=file, hope someone will be able to help me with it
Re: styling input file formbuilder
Posted: Sun Jul 06, 2008 7:48 pm
by 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...