Databases
StackOverflow2013
Postsdbo
POStyling with CSS and functionality of the upload button
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStyling with CSS and functionality of the upload button
    primarykey
    data
    text
    <p>Me and a guy from work are working on a web application for our clients to log on and manage there details. One of the sections asks the user to upload there company logo but as we all know the html browes button or the tag as its also known is a hard cookie to style. this is how I want it to look: <img src="https://i.stack.imgur.com/8EkKG.jpg" alt="alt text"></p> <p>But the reality is if I put a plain old file tag in there it would look bland, generic and out of place so I Googled for the solution and after a it of hunting I came across this code which yielded the image below the code (Which I also show the file upload without the opacity set to zero):</p> <pre><code>#divinputfile { height:85px; width:250px; margin:0px; background-image: url(images/upload_file.gif); background-repeat: no-repeat; background-position: right bottom; } #divinputfile #filepc { opacity: 0.0; -moz-opacity: 0.0; filter: alpha(opacity=00); font-size:16px; cursor: pointer; } #filepc { margin-top: 12px; } #fakeinputfile { margin-top:-28px; } #fakeinputfile #fakefilepc { width:250px; height:22px; font-size:18px; font-family:Arial; } &lt;body&gt; &lt;br /&gt; &lt;div id="divinputfile"&gt; &lt;div id="fakeinputfile"&gt; &lt;br /&gt; &lt;input name="fakefilepc" type="text" id="fakefilepc" /&gt; &lt;/div&gt; &lt;div align="right"&gt; &lt;input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p><img src="https://i.stack.imgur.com/IiGqR.jpg" alt="alt text"></p> <p>This is a basic hack and when I select the styled button I'm really selecting the invisible upload button, then the value of the upload is passed into the test box above to look like its really part of the upload. Two problem with this method and I hoping you'll be able to help me here is</p> <p>a) Only the button can be click to upload. In most browsers(not including Chrome) you can click into the text box as well as the button to upload the image. Sure with this method the text of the file path is added to the textbox but any alteration to that box wont change the file eg: if you selected file1.jpg to upload but you really wanted file2.jpg, changing the file path in the textbox wont change a thing to the ACTUAL upload element</p> <p>b) Some browers like Chrome and Opera add the \fakepath\ filepath to the textbox and this is just ugly, so any if statement that can strip this out also would be hugely useful.</p> <p>Hope you guys can help me with this, if not via code hints then if anyone knows a good JavaScript plug that saves the day.</p> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDaniel James Clarke
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POStyling with CSS and functionality of the upload button
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POStyling with CSS and functionality of the upload button
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POStyling with CSS and functionality of the upload button
      1. USchrisjlee
      1. VTFavorite
    1. COYou can use CSS3.Go to the page: http://w3schools.com/css3/css3_borders.asp and you will see how to round your button corners..
      singulars
      1. POStyling with CSS and functionality of the upload button
      1. USRares
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload