Upload File and Take Photo styled into buttons
Instead of normal form file select boxes
HTML
<form id="form_upload_image_file_button" action="/testpage" method="POST" enctype="multipart/form-data">
<input type="hidden" name="form_submit_id" value="testpage" />
<label class="upload_image_file_button">Select a photo
<input type="file" name="image_file" accept="image/*" multiple="false" onchange="form_upload_image_file_button.submit();" ">
</label>
</form>
<form id="form_upload_image_camera_button" action="/testpage" method="POST" enctype="multipart/form-data">
<!-- Note this button will only select the camera on mobile devices, on desktop it will open the file picker -->
<input type="hidden" name="form_submit_id" value="testpage" />
<label class="upload_image_camera_button">Take a picture
<input type="file" name="image_file" accept="image/*" capture onchange="form_upload_image_camera_button.submit();" ">
</label>
</form>
CSS
/*------------------------*/
/*------------------------*/
/*----- UPLOAD IMAGE -----*/
/*------------------------*/
/*------------------------*/
/*----- CAMERA BUTTON -----*/
label.upload_image_camera_button {
display: inline-block;
margin: 1em 0;
/* Styles to make it look like a button */
padding: 0.5em;
border: 2px solid #666;
border-color: #EEE #CCC #CCC #EEE;
background-color: #DDD;
}
/* Look like a clicked/depressed button */
label.upload_image_camera_button:active {
border-color: #CCC #EEE #EEE #CCC;
}
/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.upload_image_camera_button input {
display: none;
}
/*----- IMAGE FILE BUTTON -----*/
label.upload_image_file_button {
display: inline-block;
margin: 1em 0;
/* Styles to make it look like a button */
padding: 0.5em;
border: 2px solid #666;
border-color: #EEE #CCC #CCC #EEE;
background-color: #DDD;
}
/* Look like a clicked/depressed button */
label.upload_image_file_button:active {
border-color: #CCC #EEE #EEE #CCC;
}
/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.upload_image_file_button input {
display: none;
}
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.