Escape the checkbox with a checkmark

Struggling to create custom styling for a checkbox due to the limitations of input type="checkbox".

Check out my attempt at using CSS to style a checkbox:

label > input[type="checkbox"] + span::before {
    content: "✓";
    width: 20pt;
    height: 20pt;
    border-radius: 10%;
    border-style: solid;
    border-width: 0.1rem;
    border-color: gray;

    display: inline-block;
    vertical-align: middle;

} 
<label>
    <input type="checkbox" name="pos[]" value="shirt" />
    <span> shirt </span>
    <br>
</label>

Desired behavior includes:

  • Empty square centered vertically
  • Checkmark inside the square

The square is centered, but the checkmark "✓" appears at the bottom, aligned with text next to it. Various attempts with display and vertical-align have not been successful. How can I center the checkmark properly?

htmlcsscheckbox

Answer №1

To align content both horizontally and vertically, you can utilize text-align: center for horizontal alignment and line-height: {number}px for vertical alignment. For a more efficient way to manage alignment, consider using flex-box. Below is a sample code snippet that demonstrates the alignment techniques:

label > input[type="checkbox"] {
  display: none;
}

label > input[type="checkbox"] + span::before {
    content: "✓";
    width: 20pt;
    height: 20pt;
    border-radius: 10%;
    border-style: solid;
    border-width: 0.1rem;
    border-color: gray;
    line-height: 28px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}


label > input[type="checkbox"]:checked + span::before {
 content: ' ';
}
<label>
    <input type="checkbox" name="pos[]" value="shirt" />
    <span> shirt </span>
    <br>
</label>

Answer №2

Here is the corrected version of your code

label > input[type="checkbox"] + span {
    position: relative;
    width: 17px;
    height: 17px;
    border-radius: 10%;
    border-style: solid;
    border-width: 0.1rem;
    border-color: gray;
    display: inline-block;
    vertical-align: middle;
} 
label > input[type="checkbox"] {
    display: none
} 
label > input[type="checkbox"]:checked + span::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
label  {
  padding
}
<label>
    <input type="checkbox" name="pos[]" value="shirt" />
    <span></span>
    <span> shirt </span>
    <br>
</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

The issue with the data backdrop not functioning properly in Angular 6 is ongoing and

My issue lies with the data-backdrop attribute in my Bootstrap 4 modal. It does not function as expected. The intended behavior is for the modal to close when clicked outside of it, but this is not happening. I am using Angular 6: I have attempted setting ...

jqueryhtmlbootstrap-4angular6

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

javascripthtmlcssvue.js

100% height checkbox div covering the entire body

I'm struggling to limit the height of a div containing multiple checkboxes so that it doesn't exceed 100% of the window's height. I've tried numerous solutions but haven't found one that works. If anyone has any tips or tricks to h ...

javascriptjqueryhtmlcss

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

Issues have arisen with a custom element I created, named <little-game></little-game>. Here is the template code for <little-game></little-game>: <template> <a href="{{link}}"> <paper-material elevation=& ...

htmlcsspolymerpolymer-1.0

Performing PHP MySQL table database insertion utilizing the $_GET approach using Codeigniter-3 and Dropzone-4.1 plugin

Currently working with CodeIgniter 3 and running into an issue with "id_case" showing as undefined index. When I click a link in index.php: <?php echo "<td><a href='/ci_dropzone/?id_case=".$row['id_case']."'>Upload File ...

phpmysqlcsscodeigniter-3

Tips on validating an HTML textbox to prevent leading and trailing whitespaces

Here is the HTML code I have: <input type="text" name="username"> If validation needs to be added, I prefer the function related stuff to be implemented in TypeScript instead of JavaScript. ...

htmlangulartypescript

Is it possible to include custom icons and text within a column layout when the flex direction is set to row

Trying to create a single line clickable section with a play button, text, and YouTube video thumbnail. It's not rendering correctly even though the container is set as flex with row direction. Custom play button and properly sized thumbnail are in p ...

htmlcss

The reactivity of VUE3's data is limited

I am encountering an issue with a basic HTML element that has an @click event attached to it. When I click on the a tag, the value does not update in the VUE console. However, when I check the Google Chrome Inspect Element Console, the idClient value is di ...

javascripthtmlvue.jsvuejs3reactive

Policy regarding copyright content removal and protection of privacy

In the majority of musical websites I have come across, they often mention the following in their policies: At this particular website (www.Indiamp3.com), you will find links that redirect to audio files. These files are hosted elsewhere on the internet a ...

asp.nethtmlweb-crawlerprivacy

Showcasing a newly added document featuring both a visual representation and a direct file access link

I am currently facing a challenge with my website where I have 5 images that are linked to files. I recently added the functionality to upload files to a directory called "uploads". Now, I want these uploaded files to be displayed on the site using corresp ...

phphtmlloops

Is it possible to listen to an audio file using bytes stored in an arraybuffer?

After receiving a buffer array from a Java-created REST endpoint that returns a byte[] array, I successfully retrieved the array using Angular for HTTP. Now, my goal is to play the audio in the browser. Through research, I came across the Web Audio API, bu ...

htmltypescriptaudio

How can I use CSS to make the row and column headers of a table freeze while scrolling within an overflow

I am currently working on implementing frozen row and column headers in a table within a content wrapper, similar to what you see in Excel. However, I have been facing challenges with using CSS tricks that involve the position:absolute property, especially ...

htmlcss

Alter the top property of CSS using JavaScript

Hey there! I'm currently working on a project where I want to gradually change the background when a button is clicked on my website. Below you'll find snippets of JavaScript and HTML code that I'm using for this purpose. Can you take a look ...

javascripthtmlcss

How can you use jQuery to transform a H3 tag into a clickable link?

To transform the h3 tag into a clickable link with jQuery and set the href attribute, while preserving the H3 styling and adding an anchor tag, you can use the following code as an example: Click Here ...

javascriptjqueryhtml

Developing a logic for a Tagging System in PHP and MySQL

As a novice developer, I am seeking advice on my current project. I am in the process of creating a platform where users can upload images and tag them. After researching various methods of storing tags, I came across the following structure: Tag Storag ...

phphtmlmysqldata-structurestags

The function of the Django 2 model is not being identified within the index.html file

Hello everyone, I'm a newcomer to the world of Django so please go easy on me! I am currently working on creating a blog in Django and I've encountered an issue. I need to map the posts from the home page to the post page. To achieve this, I have ...

pythonhtmldjangomodel

Comparing Meteor's unsetting property versus setting it to null

In my application, there are fields including a timestamp and userId that may or may not be present in a Collection based on a Checkbox input. When the user selects the checkbox, the properties are saved with their respective Date and Time values. Howeve ...

htmlnode.jsmongodbmeteorsimple-schema

Expanding Items' Widths in ItemsControl on Silverlight

I am facing an issue with my ItemsControl where the child items are not occupying the whole width of the control: My goal is to stretch the green bits to fill the width of the control, similar to how the blue bits are shown. I have attempted adjusting th ...

silverlightitemscontrolhtml

Troubles with CSS Child Hover, Rotation, and Clipping in Pie Chart styling

The issue I am facing is with a 3-section pie chart where all sections look virtually identical. However, the :hover effect does not trigger on the first section, but it works on the other two. Each element has an equal number of overlapping parent divs, ...

htmlcsshoverclip

Why is it not possible for me to place my image and text side by side?

I've been working on my personal portfolio website and ran into an issue when trying to position the image with text that says Ib student. I attempted using the bootstrap box model which didn't work, followed by using float, but that also didn&ap ...

htmlcssbootstrap-5