Swap File Field for Picture Graphic - HTML/CSS

I am looking to enhance the appearance of my form by replacing the generic File Field with a more aesthetically pleasing Image Icon.

If you click on this Camera Icon, it will open up a Browse window:

For a demonstration, check out this JsFiddle link: http://jsfiddle.net/8aJb4/2/

Here is the code snippet:

HTML:

<div class="container">
    <input type="file" name="image_src" id="image_src" >
</div>

CSS:

.container{
    width:500px;
    border:black solid 1px;
    text-align:center;
    padding:4px;

}

To view the Image Icon, click on this link:

htmlcss

Answer №1

Take a look at this Fiddle

<div class="container">
  <span class="select-wrapper">
    <input type="file" name="image_src" id="image_src" />
  </span>
</div>


.container{
  width: 500px;
  border: 1px solid #333;
  padding: 4px;
}
.select-wrapper {
  background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 33px;
  height: 26px;
}
#image_src {
  width: 26px;
  height: 26px;
  margin-right: 100px;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 5-7 */
}

Answer №2

HTML 

 <script>
function displayImage(){
  document.getElementById("image_source").click();
 }
 </script>
<div class="container">
    <img id="picture" src="http://postimg.org/image/rg17ffpxh/" onclick="displayImage()" alt="hello"/>
   <input type="file" name="image_source" id="image_source" />
   </div>

CSS

.container{
width:500px;
border:black solid 1px;
text-align:center;
padding:4px;   
}
#image_source {
position:absolute;
left:-9999px;
}
#picture { cursor:pointer; }

I couldn't get your image link to function properly, but you can view it on jsfiddle

Answer №3

To make it happen, just hide a file element and create an image tag with a custom background. Use JavaScript to simulate a click on the file element when the image tag is clicked. Here's an example:

<input type="file" name="photo" id="photo" hidden='hidden'>
<img src='custom.jpg' onclick='triggerClick()'>

function triggerClick(){
document.getElementById("photo").click();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The iOS website won't fully load until the button is tapped two times

- (IBAction)saveButton:(id)sender { NSURL *yourWebURL = [NSURL URLWithString: webpageURLLabel.text ]; NSURLRequest *webRequest = [[NSURLRequest alloc] initWithURL:yourWebURL]; if ([self checkIfValidURL] == YES) { [webpagePreview loadReq ...

iphonehtmliosuiwebviewnsstring

Using Javascript to Retrieve Icecast Metadata

I am currently developing a web radio application that utilizes AngularJS and Laravel 5 to read Icecast streams. Currently, I have implemented loading the stream into an html5 audio element which is working well. However, I am facing an issue where the vie ...

javascriptangularjshtmlicecast

Dynamic status bar for WordPress using Advanced Custom Fields

I am currently working on developing an order tracking system using Wordpress, ACF, and a form plugin that is yet to be determined for the user interface. While the back-end functionality is working smoothly, my focus now shifts towards creating a visual ...

csswordpressadvanced-custom-fieldsacfpro

Creating a dynamic step animation with jQuery: A step-by-step guide

Struggling to find resources on how to animate a color wheel using jQuery? Want to create a spiraling effect by gradually revealing colors at 45-degree intervals, like a loading GIF spiral? I need it to cycle through the defined colors in order and then cl ...

javascriptjquerycssjquery-animatecss-transitions

Alignment issue with Bootstrap dropdowns noticed after dynamically loading dropdown content in Blazor

When working with Blazor, you have the ability to dynamically load content by enclosing it within an @if block and then setting the condition to true, such as when a button is clicked. Recently, I encountered an issue with a Bootstrap dropdown in my proje ...

cssbootstrap-4blazorblazor-server-sidepopper.js

Create a heading for the selection menu

I need to customize a dropdown list on my page so that the text "Select Language" is always displayed to the user, regardless of whether they make a selection from the dropdown. Even if the user chooses "Option 1" or "Option 2," the default text should sti ...

c#jquerycssasp.nethtml-select

Utilizing Ajax to dynamically update the content of a div element

As a newcomer to Ajax, I am trying to use xmlhttprequest to dynamically change the content of a div by fetching HTML from different URLs. However, my code doesn't seem to be working as expected. Can someone help me identify what I might be doing wrong ...

javascripthtmlajaxxmlhttprequestserver-side

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

My website has tooltips enabled, but I am looking to hide the tooltip pop-ups that appear specifically over youtube video embeds. Upon inspecting the webpage, I found the code snippet below that is associated with youtube videos: <div data-tippy-root id ...

javascripthtmljquerycss

Tips for swapping out a sticky element as you scroll

Context As I work on developing a blog website, I aim to integrate a sticky element that dynamically updates according to the current year and month as users scroll through the content. This would provide a visual indication of the timeline for the listed ...

javascriptcssstickyintersection-observerhtml-heading

Ways to determine the success of $wpdb->query and retrieve the outcome

Currently, I am in the process of developing a WordPress website, I have implemented a form that allows users to make modifications and update the database: Below is the HTML/PHP code snippet: echo '<form class="form-verifdoc" target=&q ...

javascriptphphtmlwordpress

Unexpected display issues with CSS shapes in Bootstrap framework

Been experimenting with creating custom shapes in Bootstrap - they display correctly in HTML and CSS, but Bootstrap distorts them. It seems like there are no conflicting classes. Could it be necessary to use '!important' on some of the elements? ...

cssbootstrap-5

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...

htmlangulartypescriptprimeng

Elegant rounded bordered sidebar design to highlight selected navigation items using HTML and CSS

I am looking to replicate the sidebar design displayed in the image below by using HTML and CSS. While I have successfully rounded the borders on the left side of a selected link, I am stuck when it comes to rounding the borders on the right side. ...

htmlcssanimationcss-animations

Is there a way to integrate the javascript and jQuery functions in order to conceal a button?

I recently acquired the File Upload script known as Simple Photo Manager and I am looking to incorporate jQuery functions with the existing JS code in the script. My main goal is to make the Delete button disappear once it has been clicked. However, I am ...

javascriptjqueryhtml

Interactivity Battle: Clickable Div, Button, or href?

I'm currently exploring the optimal methods for generating buttons using HTML and CSS. In the past, I used clickable divs, but it seems that may not have been the most effective approach. Should I consider using buttons or anchor tags instead? What ...

htmlcss

Is the post secure if a HTTP web page sends an ajax request to a HTTPS url?

If I developed an HTML/jQuery widget to be embedded on third-party websites with users of very limited technical knowledge and potentially missing SSL certificates, would the information posted securely through AJAX Post to a secure URL remain protected? ...

htmlajaxsecurityhttps

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

Issues persist while attempting to save sass (.scss) files using Atom on a Mac

When attempting to work with sass files, I encountered an error message every time I tried to save the file: Command failed: sass "/Users/bechara/Desktop/<path of the file>/test.scss" "/Users/bechara/Desktop/<path of the file>/test.css" Errno: ...

cssnode.jsnpmsassatom-editor

Adding space between Bootstrap columns to align them one below the other on small devices

https://i.sstatic.net/turhY.png Within this illustration, there are two columns - one with the class col-sm-3 and the other with col-sm-8, situated in a single row. Upon resizing the window (as shown in the screenshot provided), the two columns appear ...

htmlcssbootstrap-4

jQuery functions failing to target dynamically generated elements

I've encountered an issue while attempting to implement my jQuery functions on dynamically created content using the .on API from jQuery. The main objective of the code is to display a specific set of options only when a user hovers over the ".feed_po ...

javascriptjqueryhtmldom