Unable to display a custom image as a check mark on a checkbox

I tried to add some custom CSS to style the images on my checkmark boxes. The goal was to display an image with a checkmark when clicked, but unfortunately, it's not working as expected during testing.

For this task, I utilized CSS and HTML from a helpful guide on Stack Overflow. The sprite that contains each icon is organized with 50px height for easy implementation.

I'm unsure of where I might have gone wrong in my code that is preventing the checkboxes from toggling properly. Any ideas or suggestions on what could be causing this issue?

Here is the fiddle

<html><head>
    <style>
        @font-face {
    font-family: 'Scribble Box'; /*specifying the font*/
    src: url('/scribbleboxdemo.ttf'); /*path to the font file*/
}
        .scribblebox{
    font-family: 'Scribble Box';
    font-size: 50px;
}
.overlay {
  display: none;
}
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #8AC007;
  padding: 10px;
}
#map {
  position: relative;
  width: 452px;
  height: 344px; 
    float: left;
  background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;

}

/* Other CSS styles omitted for brevity */

</style>


<div id="wrapper">

<div id="map">
  <span id="station_A" class="overlay"><img src="/Bandana_top.png" /</span>
  <span id="station_B" class="overlay">Highlight image here.</span>
  <span id="station_C" class="overlay"><img src="Bandana_top.png" class="filter-tint" data-pb-tint-opacity="0.5" data-pb-tint-colour="#8fc0ff"></span>;
</div>
<p>
            <div id="first">
            <h2>
                Choose a Color
            </h2>
             <input type='checkbox' name='methods' value='valuable' id="lightblue"/<<label id="lightblue_s"for="lightblue"><</label>>
     </div>
  
   <!-- Scripts and other elements are also included within the code -->

Check the updated fiddle

javascriptjqueryhtmlcsscheckbox

Answer №1

After some experimentation, I managed to solve the issue by reverting back to the original code and then integrating the custom images for the checkmarks. It appears that there was an error in my coding that caused the initial problem.

<style>
    .overlay {
  display: none;
}
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #8AC007;
  padding: 10px;
}
#map {
  position: relative;
  /*right: -780px; removed for demo purposes */
  width: 452px;
  height: 344px; 
  background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
  top: 8%; /* whatever you like */
  left: 5%; /* whatever you like */
  position: absolute;
}
#station_B {
  top: 45%; /* whatever you like */
  left: 15%; /* whatever you like */
  position: absolute
}
.hover {
  color: green
}
    input[type=checkbox]{  display:none; }

input[type=checkbox] + label{
    background-image: url('checkmarkboxes.png');
    display: block;
    height: 50px;
    padding: 0;
    width: 48px; }

#lightblue + #lightblue_s{ background-position: 0 0; }
#lightblue:checked + #lightblue_s{ background-position: 0 -50px; }


</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
  <span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span>
  <span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
  <h2>Choose a Shirt</h2>

  <form>
    <input type="checkbox" name="image" value="station_A" id="lightblue"><label id="lightblue_S" for="lightblue"></label>
    <br>
    <input type="checkbox" name="image" value="station_B">Station Beta
    <input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna
  </form>
</p>
<script>
    $(document).ready(function() {
   $("input[type='checkbox']").change(function() {
     var state = $(this).val();
     $("#" + state).toggleClass("overlay");
   });
   $('#checkbox1').change(function() {
     if (this.checked) $('#map').fadeIn('slow');
     else $('#map').fadeOut('slow');

   });
 });
</script>

<

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

Can you explain the relationship between HTML 5 Canvas coordinates and browser pixels?

When trying to use HTML 5 canvas as a drawing board in my application, I encountered an issue. The drawings appear at an offset from the mouse pointer. My method involves using the Jquery .offset function to determine the event's position on the canv ...

javascriptjqueryhtmlhtml5-canvasdom-events

Ways to disseminate arguments when dealing with an array of arrays in JavaScript

Struggling to pass an array as arguments into the join method on path in node, but hitting a roadblock: var path = require("path"); var paths = [__dirname]; var userInput = ["app", "js"]; paths.push(userInput); var target = path.join.apply(null, paths); ...

javascriptnode.js

How can Codeception/Selenium help in testing the tooltip or customValidity message?

I am trying to implement a feature in my Codeception scenario where I want to validate a form submission with user errors, such as confirming a wrong email address, and display a custom tooltip message in the browser. HTML <form ... > <label ...

javascriptseleniumcodeception

Check to see if the property of the object does not exist within the array and update as

My goal is to add the variable content into the database content using the $push method, but only if the content.hash doesn't already exist in the database. I want to avoid duplicating information unnecessarily. return shops.updateAsync({ "user": u ...

javascriptnode.jsmongodb

Creating a dynamic table in AngularJS that can add rows and columns with cyclic values

Seeking assistance for a programming challenge. I have created a form with 2 input fields for specifying the dimensions of a table (number of rows and columns), along with a button. When this button is clicked, the table should be dynamically populated wit ...

javascriptjqueryhtmlangularjs

Does the size of a JavaScript heap, when it's big but not enough to cause a crash, have the potential to slow down a website, aside from just having an

Utilizing angular material dialog, I have incorporated a mat stepper with three tables (one per step), where one or two of them may contain an extensive amount of records. I have already integrated virtual scrolling to improve performance. However, when ...

javascripthtmlangularfrontend

What is the best way to access nested callback results from another file in a Node.js environment?

My API code can be found in the file api.js This is the content of api.js: var express = require('express'); var Vimeo = require('vimeo').Vimeo; var lib = new Vimeo('dfdfdfdfdfdfd', 'WDIt+kEVudfghjklkjhgfdfghjkjhgfMaG9X ...

javascriptnode.jsexpresscallback

Expanding Headers with JavaScript

Looking to add a Stretchy Header Functionality similar to the one shown in this GIF: Currently, on iPhones WebView, my approach involves calling a Scope Function On Scroll (especially focusing on Rubberband Scrolling) and adjusting the Image Height with C ...

javascriptioscssangularjsionic-framework

What is the best way to send an array to an ejs template within an express application?

I've been attempting to pass an array of objects to EJS views in Express, but I'm encountering issues. Here's what I have on the server side: var roominfo = function(roomname){ this.roomname=roomname; }; room_info_array= new Array(1); roo ...

javascriptnode.jsexpressejs

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Is it possible to create an inline textarea element using CSS that is selectable but still seamlessly integrated into a sentence without specifying the number of columns? Here's an example with a static number of characters (cols="11"): <p>To r ...

javascripthtmlcss

Tips for showcasing retrieved JSON with jQuery's ajax functionality

Below is the jquery code I am working with: $.ajax({ type: "POST", url: "Ajax/getTableRecord", data:{ i : id, t: 'mylist'}, dataType: 'json', success: function(data){ alert(data); ...

javascriptphpjqueryajax

Can dates in the form of a String array be transmitted from the server to the client?

Struggling to send a String array from the server side to the client using Nodejs and Pug. Encounter errors like "SyntaxError: expected expression, got '&'" or "SyntaxError: identifier starts immediately after numeric literal". Server runs o ...

javascriptarraysnode.jsjsonpug

Angular reactive forms can be customized to include a patched version of the matTime

I have an angular mattimepicker in my project. When trying to use it in a reactive form, I am encountering issues with patching the value to the edit form <h1>Reactive Form</h1> <form [formGroup]="form"> <mat-form-fie ...

javascriptangularangular-materialangular5angular8

Is there a way for me to include a prefix in the path where Vue pulls its component chunks from?

I recently incorporated VueRouter into my project and encountered an issue with the asset URL not being correct. Instead of displaying www.example.com/js/0.main.js The URL it generates is www.example.com/0.main.js Any suggestions on how to include the ...

javascriptvue.jswebpackimportvue-router

Revealing concealed content within a Bootstrap modal

I am seeking a way to utilize bootstrap modal in order to display certain contents. Specifically, the email, gender, and status information should initially be hidden and revealed only upon clicking the "view more" button. My goal is to showcase this dat ...

javascriptajaxbootstrap-modalbootstrap-5

Decoding jQuery serialized data in PHP

I am working with a form that is receiving data from the Google LocalSearch API. Users can select specific results by checking checkboxes I am adding to the form using jQuery. Here's an example of what the checkbox value might look like: title=Emijea ...

phpjquery

The addition of days is producing an incorrect result

When extracting the date from FullCalendar and attempting to edit it, I noticed that moment.js seems to overwrite all previously saved dates. Here is an example of what's happening: var date_start = $calendar.fullCalendar('getView').start.t ...

javascriptfullcalendarmomentjs

There are times when the `window.location.replace` function does not

I have implemented a Bootstrap Dropdown feature that allows users to select a language for site translation, append the URL with the selected language, and then reload the page. Initially, it works well for the first set of translations like en|es. Howeve ...

javascriptjquery

Is it really necessary to import React from 'react' in the index.js file when importing react is no longer required?

Currently diving into the world of React.js. I recently found out that after version 17, importing React is no longer necessary. My current React version is v18.2.0. Here's the code snippet in question: // import React from 'react'; import ...

javascriptreactjsimport

Mapping various sets of latitudes and longitudes on Google Maps

I am working with multiple latitude and longitude coordinates. var latlngs = [ {lat:25.774252,lng:-80.190262}, {lat:18.466465,lng:-66.118292}, {lat:32.321384,lng:-64.757370}, {lat:25.774252,lng:-80.190262}, ]; The coordinates were ret ...

javascriptphpjquerygoogle-maps