What is the best way to show a check mark when selecting a checkbox?

I have customized my checkbox to appear as a circle, and now I want to display a check mark when the user selects the checkbox.

When I remove -webkit-appearance: none;, the check mark appears but my CSS stops working.

Is there a way to achieve this without compromising my CSS?

.checkbox_round {
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #ddd;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.checkbox_round:hover {
  border-color: #000;
}

.checkbox_round:checked {
  background-color: #f00;
}
<label><input type="checkbox" name="name1" value="1" class="checkbox_round"> check box1 </label>

<label><input type="checkbox" name="name2" value="2" class="checkbox_round"> check box1 </label>

<label><input type="checkbox" name="name3" value="3" class="checkbox_round"> check box1 </label>

htmlcsscheckbox

Answer №1

To create a checkmark using CSS, you can style a checkbox element with a round shape and different states. Another option is to use a unicode checkmark character, or even insert an image as suggested previously.

Here are the first two examples of how you can style a checkmark using CSS: 

.checkbox_round {
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #ddd;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.checkbox_round:hover {
  border-color: #000;
}

.checkbox_round {
  position: relative;
}

.checkbox_round:checked {
  background-color: #f00;
}

.checkbox_round:checked:before {
  content: "✓";
  left: 3px;
  top: -2px;
  position: absolute;
}

.checkbox2:checked:before {
  content: "";
  border: 1px solid black;
  border-width: 1px 1px 0 0;
  height: 5px;
  width: 13px;
  position: absolute;
  transform: rotate(135deg);
  left: 3px;
  top: 2px;
}
<label><input type="checkbox" name="name1" value="1" class="checkbox_round"> check box1 </label>

<label><input type="checkbox" name="name2" value="2" class="checkbox_round checkbox2"> check box1 </label>

Answer №2

If you're looking to add some flair to your checkbox design, consider using a background image like an SVG.

.checkbox_round {
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #ddd;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.checkbox_round:hover {
  border-color: #000;
}

.checkbox_round:checked {
  background-image: url(https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-check-mark-1.png);
  background-size: 50%;
  background-position: center center;
  background-repeat: no-repeat;
}
<label><input type="checkbox" name="name1" value="1" class="checkbox_round"> check box1 </label>

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

Retrieve numerical data from the element and enclose it within a span tag

My goal was to indent a number, but the HTML generated from my CMS is making it difficult to target the number and apply a specific style. <div class="content"> <b>01. Header</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

jquerycsstexttextnode

"Enhance your webpage with Flexslider and captivating stretched images

When working with Flexslider, I encountered a challenge where the image was being stretched to fit the width of the flexslider. I prefer the image to be displayed centered, keeping its original dimensions, and having a black background-color. Is there a ...

cssflexslider

Adjust the image size without losing sharpness

I'm currently working on a web application for Minecraft and I am looking for a way to resize someone's skin without losing quality. I believe javascript might be the solution to this issue. ...

javascriptcssimageweb-applicationsminecraft

Obtaining connection data in jsPlumb can be accomplished through a variety of

I have created a compact table of nodes that allow me to drag and drop connections or manually input node IDs to establish connections between them. Despite searching through the documentation and scouring the internet for examples, I am struggling to fin ...

javascriptjqueryhtmljsplumb

There was an error loading the resource as the Object does not have the method 'adGallery'

For the past two days, I have been attempting to implement the jQuery plugin "ad-gallery" on my website without success. I must mention that my knowledge in JavaScript and CSS is limited, so the issue could be something simple. The peculiar thing is that ...

jquerycssgallery

How to retrieve XML data using the HTML method

This webpage is in XML format. To access the live status information, you can visit Since there is no server-side code available on this free hosting platform, you'll need to perform an HTML GET request to check if ls:islive is true or false. if ...

htmlxmlmethodsget

Tips for positioning images in the center of a footer

Hello, I am new to coding and would like some help adjusting the code for this website: The footer section at the bottom of each page features a row of logos. My goal is to make sure that these logo images display properly on mobile devices (without dropp ...

css

Capture sound and store it in a specified destination

Looking to capture and save audio files - any recommendations? After searching online, I came across some links for recording audio but they were all dead ends. I even downloaded and tested a few, but no success. I am open to using HTML5, PHP, JavaScript ...

javascriptphpjqueryhtml

"Is there a way to extract text enclosed within HTML tags, such as <div>text</div>, with Selenium using C#

How can I extract the text 'True' from within the HTML tags <div>text</div> using Selenium and C#? <div type='data' id='OfferInCart' style='display:none;'>True</div> I have attempted to retr ...

c#htmlselenium-webdriver

Setting up JW Player with a YouTube Embed URL

Embed link Is it possible to embed a YouTube link in my JW Player without disrupting the design? I have a specific design for the JW Player frame that I need to retain while incorporating the YouTube link. I have searched extensively but haven't foun ...

javascripthtmlyoutubejwplayer

Encountering issues with Stylus when trying to compile the `@font-face

I'm diving into the world of CSS compilers with Stylus for the first time, and I'm facing an issue with loading Google Web Font URLs correctly. Below is the code snippet causing trouble: @font-face { font-family: 'Roboto'; font-st ...

cssfont-facestylus

What is the process for incorporating a CSS class into a preexisting Woocommerce/Wordpress widget?

Looking for a way to add additional classes to the Woocommerce Product Categories Widget without tampering with the original source code or creating a replacement widget? The widget_display_callback seems like the way to go, but the available documentation ...

csswordpresswoocommerce

Enhance your HTML page functionality with the power of jQuery

I'm working on creating a HTML page with interactive options. I want to implement an option menu that will pop up when hovered over or clicked, allowing me to customize colors, background patterns, and more. It seems like this involves altering the CS ...

htmljquerycss

What could be causing the Quasar drawer to overlap the Quasar toolbar in a Vue application?

I am currently utilizing the quasar UI framework and have a main layout file that includes only a toolbar. This toolbar is meant to display across all pages in my application. <template> <q-layout view="hHh Lpr lff" style="backgro ...

javascripthtmlcssvue.jsquasar-framework

Remove specific data from jQuery datatables using data attribute

My jQuery datatable is loaded with data from a database without any filtering by default, providing all the necessary information for users. In addition to the built-in search functionality of jQuery datatables, I have incorporated custom search input fiel ...

javascriptjqueryhtmldatatables

Using column-count within a media query is not supported

I am encountering an issue with my CSS code that includes the column-count property within a media query, and for some unknown reason, it doesn't seem to be working! .masonry { -webkit-column-count: 3; -moz-column-count: 3; column-count: ...

htmlcss

The <a href="#divtagid"> link is incapable of triggering the opening of the div tag when called from JavaScript

I need help with displaying the content of a div with the id "hello" in maindiv when clicking on the href "Click Here", but it's not working as expected. Here is the code I have: $(document).ready(function() { var newhtml = '<a href="#he ...

javascriptjqueryhtml

import an external JavaScript file in an HTML document

Looking to load a .js file from a simple HTML file? If you have these files in the same folder: start.js var http = require('http'); var fs = require('fs'); http.createServer(function (req, response) { fs.readFile('index.htm ...

javascripthtmlnode.js

Coloring a table in vue.js based on performance rankings

I'm facing an issue with sorting my data performance in vue js. Here is the script I have created so far: <template> <div> <div class="row"> <h2> Campaign Performance </h2> <table class=&q ...

javascripthtmlvue.js

What is the best way to use shortcodes to display custom fields for post objects, specifically products, within WordPress posts

I'm in the process of displaying 'featured products' within my blog posts. These specific products need to be chosen using custom post objects on the backend for each individual post. I've outlined what I believe the PHP code should lo ...

phphtmlwordpresscustom-fields