ppbb123 Posted July 3, 2013 Report Share Posted July 3, 2013 How to customize the button text of file field? Quote Link to comment Share on other sites More sharing options...
HongTaiLang Posted July 3, 2013 Report Share Posted July 3, 2013 The "upload file..." text is pre-defined by the browser and can't be changed. You can change it with a shot of CSS/JS. For example: 1. Insert a HTML block to add a text field and a button to make them like a file field: <tr><td style="width:140px;" class="cbFormLabel"><label>Logo</label> </td><td> <input type="text" class="cbFormTextField" id="f_file"><input type="button" value="Upload" class="file" onclick="InsertRecordfileField.click()"></td></tr> 2. Insert JS code in the Footer to hide real file field <script> document.getElementById("InsertRecordfileField").style.display ="none"; function fire() { document.getElementById("f_file").value = document.getElementById("InsertRecordfileField").value; } document.getElementById("InsertRecordfileField").onchange = fire; </script> css style class "cbFormLabel" and "cbFormTextField" only work in the direct link. If the DataPage is embedded into a page, the style will be broken. You can insert the correct style directly. For example: <td style="width:140px; color:blue; font-family:Verdana; font-size:13px;"><label>Logo</label> </td> Quote Link to comment Share on other sites More sharing options...
alexm72 Posted August 23, 2017 Report Share Posted August 23, 2017 Agree, I hate the standard browser button. I like my own graphics I'm kinda a novice but try this, it worked for me: In your file field, enable the label to be shown on top. (This is where your going to put an image of uploading a photo which will cover the browse button.) <img id="browsepng" style="position:absolute;width:100px; height:100px;margin-top:5px;" src="http://patsi.net/addphoto.png"></img> Make your file field height large so that the image will fit (replace the image in the src with your image). This will cover the browse button in most browsers with your image, but not all. Also, I ID it because it does appear slightly in a different place in each browser so it has to be CSS. When a user hits the image, the file field will still try to upload a file and thats good. Now, set the opacity of the file field to zero (if you do display:none it may not show the label). My tag is #InsertRecordpic1 but yours could be #InsertRecordYOURFIELDNAME. Now when a user submits a pic, they will just see your image. But wait, the actually selected wont show because you opacitied it at zero. Now insert this code from this forum member which shows you the image just uploaded right below the field. Hope this helps Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.