To style a checkbox with an image (such as a checkmark or X) using CSS and HTML while hovering over it

Hey there, I'm interested in playing around with HTML and CSS while learning. I have a question: is it possible to add an image to a checkbox when it's hovered over? Just to be clear, I only want the image to appear when the checkbox is being hovered over, not clicked. For example, I'd like to add a semi-transparent checkmark to the checkbox when it's hovered, indicating that it will appear fully when clicked. Here's what my checkbox looks like:

    <div class="checkbox">
        <label><input type="checkbox" value="" />Example</label>
    </div>
csscheckbox

Answer №1

Instead of relying on images, you can achieve the desired effect through CSS using :before and :after with the addition of :hover

Take a look at this demonstration: 

body {
  background: #eeeeee;
  color: #000000;
  border: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  word-wrap: break-word;
  z-index: 0;
  font: 14px/1.5em sans-serif;
  text-align: justify;
}
.box {
  background: #555;
  color: #ffffff;
  width: 250px;
  padding: 10px;
}
p {
  margin: 1.5em 0;
  padding: 0;
}
input[type="checkbox"] {
  display: none;
}
label {
  cursor: pointer;
}
input[type="checkbox"] + label:before {
  border: 1px solid #ffffff;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}
input[type="checkbox"] + label:hover:before {
  background: #fff;
  color: #666;
  content: "\2713";
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  background: #fff;
  color: #666;
  content: "\2713";
  text-align: center;
}
input[type="checkbox"]:checked + label:after {
  font-weight: bold;
}
<div class="content">
  <div class="box">
    <p>
      <input type="checkbox" id="c1" name="cb">
      <label for="c1">Checkbox</label>
    </p>
  </div>
</div>

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 width property is not being passed down to the table

I'm experiencing difficulties with the scaling of my body content. When the page is initially opened, it scales to 100%. However, when I resize the screen to make it wider, the content gets bigger but when I try to make it smaller again, it remains a ...

htmlcssnetsuite

JavaScript Switch Open/Close Mobile Navigation Menu

I'm currently facing a challenge with a specific issue. I want to implement a toggle menu for mobile devices on a website that I'm developing. It's functioning smoothly, and you can see it in action on this CodePen. The JavaScript code for ...

javascriptjqueryhtmlcss

MVC Template with a Defective BootStrap

Struggling with creating an MVC master template along with sub-pages using Bootstrap. Sadly, I seem to have messed it up and can't quite figure out where the problem lies. You can check out my test website at Do you see how the different sections a ...

cssasp.net-mvc-4twitter-bootstrap

Checking the Length using JQuery

My dilemma is with a text field (datepicker) - I want the button to change color when someone selects a date, but it's not working. Can you please assist me? HTML <input type="text" id="datepicker"> <button type="button" onclick="" class=" ...

jqueryhtmlcss

HighCharts.js - Customizing Label Colors Dynamically

Can the label color change along with gauge color changes? You can view my js fiddle here to see the current setup and the desired requirement: http://jsfiddle.net/e76o9otk/735/ dataLabels: { format: '<div style="margin-top: -15.5px; ...

javascriptcsshighchartscolorslabel

Rendering SVG graphics on browsers for Android devices

I've been struggling with an issue for quite some time now and I can't seem to find a solution. The problem lies in having an SVG image as a CSS background on the top left corner of a div. Instead of seamlessly merging with the div background, i ...

androidhtmlcsssvg

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

javascripthtmlcsscodeigniter

Styling drop caps using CSS on Wordpress posts

I've successfully implemented a customized dropcap for my Wordpress blog posts using CSS. Is there a way to limit this effect to just the first paragraph, leaving subsequent paragraphs unaffected? Any guidance on achieving this would be highly apprec ...

htmlcss

Are you curious about how jQuery can be used to group buttons together?

In my ASP.NET MVC application, I incorporate JQUERY to enhance the user experience. I am curious if there is a way to group buttons together, not radio buttons but regular buttons. Can I have buttonA + buttonB + buttonC grouped together with some space i ...

jquerycss

Replace the default disc icon with a more detailed icon for UL lists

I am working with an unordered list and I want to use <details> to show a sublist for one of the items: <ul> <li><details> <summary>details bullet</summary> <ul> <li>detail 1</li> ...

htmlcss

Fixed Collapse of Vertical Navbar in Bootstrap 4

Currently delving into the world of bootstrap and facing a challenge. I am attempting to craft a vertical navbar on the left side of the page once the user has scrolled past the full-page 'intro' element using bootstrap 4. The code snippet provi ...

htmlcsstwitter-bootstrapwebbootstrap-4

Central AJAX spinner

I am having trouble centering the ajax loader. Currently, it is appearing in the right corner of the screen instead. Any help is appreciated. Below you can find the code snippet: div.amshopby-overlay { background-color: #fafafa; height: 100%; ...

css

Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click. Switching the display from flex to column fixes the issue, but I don' ...

javascripthtmljquerycss

Is it possible to dynamically assign a CSS class to a DOM element during a drag operation while the mouse button is held down?

I am currently working on developing a unique pathfinder visualizer. My progress so far includes creating a grid of size 16x45 using the function below: export const drawBoard = () => { const boardContainer: HTMLDivElement | null = document.querySelec ...

javascriptcsstypescriptdom-events

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...

javascripthtmlcssangularjs

What is the best way to apply a background color to text seamlessly? (Using HTML5 and CSS3)

<!-- 6장 연습문제 4 --> <html lang = "ko"> <head> <meta charset = "UTF-8"> <style> img{margin-left: auto; margin-right: auto; display: block;} .hyper{ text-decoration-line: ...

htmlcss

The Bootstrap theme showcases a narrower layout than its parent container

I'm struggling with managing the width of the bootstrap container and row. Inside the row, I've placed all the content, but for some reason, the sizes are showing differently on jsfiddle and the image preview. <!DOCTYPE html> <html lang ...

htmlcssbootstrap-5

What are some strategies for efficiently displaying a large amount of data on a screen using Javascript and HTML without sacrificing performance?

Imagine having a hefty 520 page book with over 6,200 lines of text ranging from 5 to 300 characters each. The challenge lies in efficiently displaying this content on the screen for users to read without causing lag or performance issues. Attempting to re ...

javascripthtmlcssreactjscanvas

The font size of the textarea dynamically adjusts based on the size of the screen

Some strange behavior is occurring in the Android default browser when I set the width and height of a textarea to 100%. The font size of the textarea seems to increase based on the screen size, and even though I attempted to alert the font-size using jQue ...

javascriptjquerycsstextarea

Issue with Material Design Lite input floating label not functioning properly post page navigation

I am currently developing a mobile hybrid application using Material Design Lite, but I have run into a small issue. When I add input field elements to my pages, the floating text and placeholder do not function properly. In my application, I am utilizing ...

angularjshtmlcssmaterial-design-lite