What could be causing the slight imperfection in the alignment of this CSS checkbox slider switch?

This unique CSS slider switch has different rendering outcomes based on the resolution:

  • It is pixel-perfect on a laptop display with a resolution of around 1400 x 800.
  • However, it is not pixel-perfect on a 1920 x 1080 display with Windows 10's "Scale and layout" set to 100% and browser zoom at 125%.
  • Interestingly, it becomes pixel-perfect on a 4k display when Scale and layout are at 150%, along with a browser zoom set to 150%.

When I say it's "not pixel perfect", there is some subpixel white space between the border and the dark circle as shown in this image:

https://i.sstatic.net/zq6bd.png

Adjusting the value from transparent -9px can help bring the circle closer to the left border, but it can create overlap with a new circle on the right side.

The question remains: How can we achieve a perfect rendering for this switch regardless of the resolution?

.switch {
  appearance: none;
  padding: 9px 18px;
  border-radius: 13px;
  background: radial-gradient(circle 9px, #001122 100%, transparent 100%) transparent -9px;
  border: 1px solid #001122;
}

.switch:checked {
  background-position: 9px;
}
<input type="checkbox" class="switch">

cssresponsive-designscreen-resolutionpixel-perfect

Answer №1

Striving for perfection with gradients may seem impossible, but you can enhance their visual appeal by incorporating some spacing.

.switch {
  --s: 20px; /* adjust the size */

  appearance: none;
  height: var(--s);
  aspect-ratio: 2;
  border-radius: var(--s);
  background: radial-gradient(50% 50%,#001122 92%, #0000) left/var(--s) 100% no-repeat content-box;
  border: 1px solid #001122;
  padding: 2px; /* set the gap */
  box-sizing: content-box;
}

.switch:checked {
  background-position: right;
}
<input type="checkbox" class="switch">

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

Creating a Custom Progress Bar with Bootstrap

I'm encountering an issue with aligning a Bootstrap 3 progress bar vertically within a table cell. While I have successfully aligned other cells to the middle, the progress bar still remains in its original position. How can I eliminate the excess spa ...

htmlcsstwitter-bootstrap

Tips on causing a div to overflow instead of wrapping onto a new line

Are you looking to design a slider with 3 image containers all in the same row, where the third one overflows instead of wrapping to a new line? Here is an example: Desired Design: https://i.stack.imgur.com/dKyEg.png Current State: https://i.stack.imgu ...

css

Creating Seamless, Unified Shape-to-Shape (Containers) Transition with CSS and JavaScript - A Step-by-Step Guide

I am experimenting with creating a unique effect where two rectangular shapes, each containing text and with rounded ends, move towards each other, merge to form a single rounded rectangle as the page is scrolled down, and then separate back when scrolling ...

javascripthtmlcssanimationcss-animations

Challenges with pointer-events and z-index

I have been struggling to understand why I am unable to click the links in my footer. Even though my CSS may not be perfect, it does serve its purpose. There must be a more efficient way to create a footer that sticks to the bottom of the page and appears ...

htmlgoogle-chromecss

What is the best way to create a toggle effect for a <nav> bar that appears from beneath a div?

I need assistance with a navigation setup where the nav (located inside the header) needs to be connected to the bottom of a div named .menu_bar. The desired behavior is for the nav to slide down from directly underneath the .menu_bar when toggled, but cur ...

javascriptjqueryhtmlcss

ReactJs - Reactstrap | Issue with Jumbotron displaying background color

I am trying to create a gray background using Jumbotron in reactstrap. After installation and reference in required places - index.js import 'bootstrap/dist/css/bootstrap.css'; Jumbotron has been implemented in SignIn.js - import Re ...

javascriptcssreactjs

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

javascriptcsshtml

Tips on how to update the styling of an active link

http://jsfiddle.net/G8djC/2/ Looking to create a tabbed area where content changes based on the tab clicked. The Javascript function switches the link class to active upon clicking. However, struggling to change the color of the active tab beyond the firs ...

javascripthtmlcssclasstabs

Is there a way to utilize JQuery to identify and update the contents of a specific element?

My current structure is as follows: <div class="button"> <a href="/" target="_blank" class="test">Photos</a> </div> How can I use JQuery to select .button and remove the target="_blank" attribute from the html? I managed to reac ...

javascriptjquerycss

How can I ensure that my columnar div box is responsive on smaller devices with CSS or should I consider using Bootstrap?

I have a container with a row that contains multiple div boxes. Currently, I am using CSS to spread these div boxes into 3 columns using the column-count property. I have a few questions: 1) How can I make this responsive for smaller devices? 2) Can I ...

htmlcssgridviewbootstrap-4

Center the logo between the menus in the foundation framework

Struggling to center the logo between menus using Foundation Zurb. I'm envisioning a layout similar to [menu1] [menu2] --[logo]-- [menu3] [menu4]. I believe utilizing the grid system may help achieve this: <div class="panel hide-for-small-down"&g ...

htmlcsszurb-foundation

Bootstrap only allows for styling the border row and outside of a table

I'm looking to remove the vertical border of a table using bootstrap, except for the outside border as illustrated below. https://i.sstatic.net/RYq7o.png I've attempted to achieve this by: <table class="table no-footer worker-data tabl ...

htmlcssbootstrap-4

In search of the perfect jQuery Autocomplete Control title

If you visit the website , you'll notice a search box in the top-right corner that displays an autocomplete menu while typing. I'm curious to know what this UI Control is called or if there's a library available that offers a similar feature ...

javascriptjqueryhtmlcss

Is it possible to modify the text alignment of a div based on the dropdown selection

I'm having trouble getting the alignment to work with my dropdown list that styles the font of a div. It's frustrating because I usually find solutions easily on Google, but this time the align feature is really bugging me. <SCRIPT LANGUAGE=" ...

javascriptcss

Pikabu's Uphill Battle with Heights

I'm currently in the process of developing a new off canvas mobile menu for a website project to replace an outdated and faulty version. After some research, I have decided to use https://github.com/mobify/pikabu as it meets all my requirements. Howev ...

javascriptjquerycss

Iframe overlay feature functioning on Chrome but not on IE11

I have a Document viewer with a .less file containing the following styling: div.document-previewer-container { //height: 400px; //width: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; //padding: 5px 2px; > div.document-preview { h ...

javascripthtmlcssangularjs

Can the loaded image from the css sprite be displayed on the screen?

My webpage is designed to load two images from a CSS sprite using the following code: <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div class="arrow low"></div> ...

htmlcssimageprinting

What is the best way to align an extensive text and an image side by side within a table cell?

I am facing an issue with my code. In one of the td elements, I have the user's name image on the left and their first name on the right. The problem arises when the first name is too long, causing the image to disappear. Everything works fine if the ...

cssangularsass

Navigation links can become stacked when the page is zoomed out

Currently working on a website using html and css. I have managed to create a navigation bar with links, but the issue arises when I zoom out - the links stack on top of each other rather than staying in line. Any guidance or tips would be greatly apprecia ...

htmlcssnavigation

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

I have been working on a horizontal menu that is functioning well for me. However, according to the design requirements, I need to adjust the height of <div id="nav-subMenu"></div> if the main/parent menu li does not have any submenus or ul. Th ...

javascriptjquerycss