-
Posts
-
hello im trying to style the ‘browse button’ here: http://50.87.249.71/~cherryl9/test/?product=birch-plywood
I basically want it similar to the upload to cart button below.
I realize that is not possible in CSS and need a JQuery script somehow, right? How can I do it?
ThanksHi Matt,
Changing the file upload button is a bit of an in-depth change but kindly try to follow the suggestions here: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Hope this helps.
Hi, thanks I’m looking it into right now, but where shall I add the code
<input type=”file” name=”file” id=”file” class=”inputfile” />
<label for=”file”>Choose a file</label>as reported on that article? I tried adding it in my style sheet that I am editing with the CSS Stylesheet editor, but nothing changed.
Thanks!just a follow up to clarify- what I’m trying to do is to style the ‘choose file’ into the accordion titled “request a quote now” in this page: http://50.87.249.71/~cherryl9/test/ . if you click on the accordion, at the end of the menu, you’ll find the ‘choose file’ button. I want it to be similar and next to the ‘send’ button. This is a form I generated with form7.
Is it possible to style that button?
Thanks!Hi Mat,
Thanks for writing back!
As mentioned, this is quite a bit tricky converting a normal upload button into a styled one. However, following the article, you should be able to achieve your desired results. As this is a custom development, that is outside the scope of support we can provide, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.
This code:
<input type="file" name="file" id="file" class="inputfile" /> <label for="file">Choose a file</label>Needs to go in between your Contact Form 7 fields. The first line of the code needs to be replaced with CF7 generated input field (see: http://prntscr.com/axhmm5). So the updated code will look like this:
[file my-file id:my-file class:inputfile] <label for="file">Choose a file</label>Hope this helps. 🙂
Thank you!
