Substituting HTML checkboxes with highlighted images for consistent display across different web browsers

I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect.

My goal is to create a similar functionality as shown in this video using just CSS if possible.

I have successfully implemented it in Chrome with the following code:

.check_test {
  width: 200px;
  height: 200px;
  background: blue;
  -webkit-appearance: none;
}
.check_test:checked {
  border: 2px solid blue;
}
<form>
  <input class="check_test" type="checkbox" name="check1" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Croquetplayers.jpg/220px-Croquetplayers.jpg); " />
</form>

However, it seems that this method will not work on Internet Explorer based on caniuse.

Is there an alternative CSS approach that can achieve the same outcome? And if not, is there a straightforward jQuery solution available?

jqueryhtmlcsscheckbox

Answer №1

A solution is to add an id to the checkbox and use a label with it.

http://jsfiddle.net/k47qcb7d/2/

.check_test:checked + label {
    position: relative;
}

.check_test:checked + label:before {
    display: block;
    content: "";
    height: 30px;
    width: 100%;
    background: black;
    position: absolute;
    left: 0;
    bottom: 0;
}

This method works on IE9+ browsers, but using jQuery for the selector can make it compatible even with older versions like IE6.

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

Having trouble replacing scss variables in react-h5-audio-player

I recently integrated react-h5-audio-player into my project and followed the instructions on the README page to customize the styles by updating the SCSS variables that control the colors. However, it appears that my custom styles are not being applied. An ...

javascripthtmlcssreactjssass

Using jQuery to Activate Genuine Events

Is it true that jQuery's trigger() only executes event handlers bound with jQuery? I have some modules that utilize native browser event binding. Although the solution from works for me, I'm curious if there is a built-in way in jQuery to handle ...

javascriptjqueryjquery-events

Unable to alter the dimensions of the `symbol` element from an external SVG using CSS, although the other `symbol` within the same document is responsive to styling changes

Could someone help me find the bug in my code related to resizing SVG symbols with CSS? I am able to resize one <symbol> from an external SVG file, but not another <symbol> from the same file. In my CSS, I am trying to change the width and hei ...

htmlsvg

Create an input element using JavaScript/jQuery

Looking for some help with Javascript on a simple task. When a specific option is chosen, I want to add an input field to a div element. <select name="amount" > <option value="50">50$</option> <option value="100">100$</o ...

javascriptjqueryinputfieldaddition

Sticky positioning for dropdown menu in table column body

Greetings, I need some assistance with a formatting issue. My goal is to make the first and second columns of my table sticky by applying a "sticky" position to them. However, one of the columns contains a dropdown menu and the problem is that the content ...

htmlcss

The previous method of using `vue/compiler-sfc ::v-deep` as a combinator has been phased out. Instead, opt for the new syntax `:deep(<

When developing with Nuxt 2, I am encountering numerous [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. errors when running npm run dev. After attempting to resolve the issue by changing a ...

cssvue.jsnpmnuxt.jsvue-sfc

Issue with JavaScript ScrollTop

Simply put, I am trying to determine the total scroll size for a text area in a unit that scrollTop can align with. However, I am at a loss on how to do so. I've tried scrollHeight and various other methods without success. Any advice or suggestions ...

javascripthtmlcssdom

Photoswipe using identical source code, yet the output is malfunctioning

Having an issue with my code that refreshes the content of a ul element. Initially, it works fine by directly loading the ul content, but I am constantly creating new content every 10 seconds to provide users with fresh updates. Even though the source co ...

javascriptphpjqueryajaxphotoswipe

Is there a way for me to keep an image stationary on the page while allowing overlaying text to move?

Currently, I am exploring the process of coding a website that mimics the style of this particular webpage: . I am particularly interested in learning how to create a scrolling effect for text within a fixed area, while keeping the accompanying images st ...

javascriptjqueryhtmlcss

Enhancing Material UI List Items with Custom Styling in React.js

My website's navigation bar is created using material-ui components, specifically the ListItem component. To style each item when selected, I added the following CSS code: <List> {routes.map(route => ( <Link to={route.path} key={ro ...

cssreactjsmaterial-ui

Accessing JavaScript cookie within .htaccess file to establish redirection parameters according to cookie content

Is there a way to modify the rules within my .htaccess file so that it can properly read a user-side cookie and redirect based on its content? The scenario is this: I have a cookie called userstate which contains an abbreviation of US states, such as AL ( ...

javascripthtml.htaccess

Obtain the child's identification number and include it in the parent element as an ARIA

I need assistance with a JavaScript (or jQuery) function to dynamically add an 'aria-labelledby' attribute to parent <figure> elements based on the ID of the <figcaption>. I have multiple images and captions set up in <figure>&l ...

javascriptjquerywai-aria

Stop images within contenteditable divs from being easily dragged and dropped into unrelated div elements

In order to maintain data integrity, I have implemented a rule where users are allowed to drag images within a specific div. Later on, I need to retrieve the positions of these images within the div. However, it is crucial for my business requirements tha ...

htmlcss

Issue with Jquery .scroll method not triggering display:none functionality

Styling Using CSS #acc-close-all, #to-top { position: relative; left: 951px; width: 29px; height: 42px; margin-bottom: 2px; display:none; } #acc-close-all a, #to-top a { position: absolute; float: right; display: block ...

javascriptjqueryhtmlcss

Displaying PHP strings with spacesFeel free to let me know

I have two files named "index.php" and "output.php". In the index.php file, there is a dropdown list populated with all Italian city names fetched from a MySQL table. The objective of my test case is to select a city from the dropdown list and send its val ...

phphtmlmysqlweb

Saving a session variable to the database using ajax technology

If you're like me and struggling to figure out how to add a session variable (username) to a database using ajax, I've been there. My limited knowledge of jQuery and JavaScript made it quite the challenge. The dynamic table I'm working with ...

phpjquerymysqlajax

Ways to verify the content within two separate p elements

<p> expanded state:</p> <P> true </p> Merging the text from both tags into a single output. Final Output: expanded state: true ...

javahtmlseleniumselenium-webdriver

Something is off with the CSS height property

I am facing an issue with setting the height of a div inside another div. To better illustrate my problem, here is the code snippet: .prodContent1 { position: absolute; background-color: #e1e1e1; border: 1px solid #ddd; width: 100%; box-sizi ...

htmlcssheight

How can I configure my React Project to direct users to example.com/login.html when they land on the root URL?

My goal is to verify a user's identity through a third-party authentication server. The redirect_uri indicates that after the user logs in, they will be redirected to example.com/login.html. Inside the login.html file, there will be specific html/scr ...

javascripthtmlreactjssingle-page-application

Clicking a button in a custom dialog header using jQuery

I am in the process of developing a jQuery Dialog that covers the entire screen. To create a personalized header for the Dialog, I have set up a custom <div>. Within this <div>, there is a nested <table>. The <table> consists of 1 ...

jqueryeventsbuttondialogclick