Chrome 83 introduces an update to new form styling with customizable color options

Following the recent Chrome update, default form styling has seen an improvement in Chrome. The post suggests that it should be feasible to customize this form theme to align with a website's color scheme.

Our goal was to achieve a beautiful, web-friendly, and neutral appearance. We aim for every design system to find elements of familiarity in these new designs and easily picture how they could be adapted to fit their own brand identity.

I've spent several hours attempting to remove the default blue color that clashes significantly with the rest of my website. Besides using '-webkit-appearance: none;' and manually styling elements like checkboxes, I'm unsure if there is an alternative solution.

Have others encountered this same issue or found a solution or documentation that I may have overlooked?

cssformsgoogle-chromecheckbox

Answer №1

I have found a simple solution that solely relies on CSS. This method can be applied to Safari and Chrome browsers, although they are already grayscale by default.

input[type='checkbox']:checked {-webkit-filter: grayscale(100%);}
input[type='radio']:checked {-webkit-filter: grayscale(100%);}

Answer №2

This code is specifically for Chrome version 83 and above - other browsers may have different effects (often grayscale).

Currently, this method seems to be effective as long as a background color is defined for "body":

input[type=checkbox] {
    mix-blend-mode: luminosity;
}

For demonstration purposes:

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

Although its longevity is uncertain, this temporary fix could help ease the pain of "designer suffering" caused by disrupted color schemes :-).

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>Test</title>

  <style>
    body {
      background-color: white;
    }  
    input[type=checkbox] {
          mix-blend-mode: luminosity;
    }
  </style>

</head>

<body>
 <label><input type="checkbox" checked>Test</label>
</body>

</html>

Additional resources:

Answer №3

This CSS solution offers the flexibility to customize colors while maintaining a sleek design. Simply update the --primary-color variable to suit your needs. Compatible with Chromium browsers (Chrome, new Edge) and Firefox.

:root {
  --primary-color: #f44336;
}

input[type="checkbox"] {
  height: 14px;
  width: 14px;
  position: relative;
    -webkit-appearance: none;
}

input[type="checkbox"]:before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid #767676;
  background-color: #fff;
}

input[type="checkbox"]:hover::before {
  border: 1px solid #4f4f4f;
}

input[type="checkbox"]:checked:hover::before {
  filter: brightness(90%);
}

input[type="checkbox"]:checked:disabled:hover::before {
  filter: none;
}

input[type="checkbox"]:checked:before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
}

input[type="checkbox"]:checked:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 2px;
  box-sizing: border-box;
  height: 5px;
  width: 10px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: translateY(-1.5px) rotate(-45deg);
  transform: translateY(-1.5px) rotate(-45deg);
}

input[type="checkbox"]:disabled::before {
  border: 1px solid #c9ced1;
  border-radius: 2px;
  background-color: #f0f4f8;
}

input[type="checkbox"]:checked:disabled::before {
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  background-color: #d1d1d1;
}
<input type="checkbox"></input>
<input type="checkbox" checked="checked"></input>
<input type="checkbox" disabled="true"></input>
<input type="checkbox" disabled="true" checked="checked"></input>

Answer №4

Incorporating the hue-rotate() filter allows for altering the background color of selected checkboxes. For instance, this snippet of CSS code turns it into a vibrant green:

Input[type=checkbox]:checked{filter:hue-rotate(290deg);}

To deepen the green shade, simply introduce grayscale into the mix:

Input[type=checkbox]:checked{filter:hue-rotate(290deg) grayscale(50%);}

For further color adjustments, consider implementing the brightness() filter.

If you wish to have a black checkbox that transitions to white upon selection (similar to a standard checkbox but without the border), utilize invert(), grayscale, and brightness accordingly:

Input[type=checkbox]:checked{filter:invert() grayscale(100%) brightness(180%);}

Answer №5

Modifying the style of checkboxes can be a challenge, as the native checkbox cannot simply be updated. Instead, you must hide the native checkbox and insert a custom element using :before

Below is an example using Font Awesome (a free icon for the checkmark: \f00c)

input[type="checkbox"] {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  /* Show the border to simulate the square */
  border: 1px solid #ccc;
  /* Hide the native checkbox */
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
}

input[type="checkbox"]:before {
  /* Show some fake element to keep the space for empty "square" */
  content: "\f0c8";
  color: transparent;
}

input[type="checkbox"]:checked:before {
  /* Show actual checkmark */
  content: "\f00c";
  color: black;
}
<script src="https://kit.fontawesome.com/59ba4e0c1b.js"></script>
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked

Additionally, here is an example using pure Unicode characters (which may require additional adjustments to prevent jumping)

input[type="checkbox"] {
  /* Show the border to simulate the square */
  border: 1px solid #ccc;
  /* Hide the native checkbox */
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
}

input[type="checkbox"]:before {
  /* Show some fake element to keep the space for empty "square" */
  content: "w";
  color: transparent;
}

input[type="checkbox"]:checked:before {
  /* Show actual checkmark */
  content: "✓";
  color: black;
}
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked

Answer №6

One way I found to restore the appearance of grey/black checkboxes, specifically for desktop versions of Chrome that are equal or greater than version 83.

if (window.chrome) {
    var ua = navigator.appVersion;
    if (ua.indexOf('Mobile') === -1) {
        var flag = ua.indexOf('Chrome/');
        if (flag !== -1) {
            var version = parseInt(ua.substr(flag + 7, 2));
            if (version >= 83) {
                var chromeStyle       = document.createElement('style');
                chromeStyle.type      = 'text/css';
                chromeStyle.innerText = 'input[type="checkbox"] {-webkit-filter: brightness(0.9);} input[type="checkbox"]:checked {-webkit-filter: grayscale(100%) invert(100%) brightness(1.3);}';
                document.head.appendChild(chromeStyle);
            }
        }
    }
}

Answer №7

The recent update in Chrome 83 that changed the widget appearance has negatively impacted my Gui design in p5.js. Fortunately, I was able to find a workaround to revert back to the style of Chrome 81. It's uncertain how long this option will be available, so act quickly by pasting the following link into your Chrome address bar:

chrome://flags/#form-controls-refresh

This will display a variety of internal settings where you can disable the Web Platform Controls updated UI, which is the new interface introduced in Chrome 83. After making this change, remember to restart your browser to see the modifications take effect. This will eliminate all the undesirable "improvements", such as the overly bright blue slider mentioned previously.

I am grateful to a Reddit user for sharing this valuable information with me, although I unfortunately cannot locate the original post now. (My current setup: Mac, Mojave 10.14.6, running Chrome 83.0.4103.116, as of June 25, 2020).

Farewell and good luck!

Answer №8

If you're using Chrome 91, consider experimenting with the accent-color CSS keyword. This feature allows developers to define the accent color for user interface elements such as checkboxes and radio buttons.

It's worth noting that the accent-color property is still in the experimental phase. To test it out, make sure to enable 

chrome://flags/#enable-experimental-web-platform-features
.


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Title</title>
      </head>
      <style>
        input[type="checkbox"] {
          accent-color: blue;
        }
      </style>
      <body>
        <input type="checkbox" />
      </body>
    </html>

Answer №9

I initially believed I would have to implement -webkit-appearance: none;, but as it turns out, it wasn't needed after all. Additionally, utilizing JavaScript and/or filter is superfluous.

This is where my solution led me: https://codepen.io/rainbow-rhythms/pen/EQyMxPo

Answer №10

Try this method:

input[type="checkbox"] {
    -webkit-appearance: none;
}

After that, customize the styling to your liking.

To show the checked state, use a :before pseudo-element with a font icon like Fontawesome or an image like this example:

input[type="checkbox"]:checked:before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    background: url(check.png) no-repeat center 3px transparent #ff0000;
}

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

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

javascriptjquerycssresizablejquery-ui-resizable

Controlling the row height in an HTML CSS table

I'm facing a challenge with a table that has two rows, and I need to reduce the height of the top row (highlighted in blue) to match the height of its child div (.black), but I'm struggling to make it work. I've experimented with various ad ...

htmlcsshtml-table

Issue with CSS: Hover effect causing unexpected additional white space

My main goal is to implement a hover effect that covers an entire section, but I'm facing some challenges. When I hover over my products, it doesn't behave as expected and adds extra white space below while not covering the section properly. Thi ...

htmlcss

Is it possible for 'will-change' to achieve the intended outcome when implemented using the Web Animations API?

Google recommends: Google suggests that if an animation may occur within the next 200ms [...] it's a good idea to use will-change on elements being animated. In most cases, any element in your app's current view that you plan to animate should ...

cssanimationweb-animationswill-changeweb-animations-api

Incorporating Blank Class into HTML Tag with Modernizr

Currently, I am experimenting with Modernizr for the first time and facing some challenges in adding a class to the HTML tag as per the documentation. To check compatibility for the CSS Object Fit property, I used Modernizr's build feature to create ...

javascriptcsscross-browserfrontendmodernizr

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

javascriptjqueryhtmlcss

What are some strategies to optimize image loading speed in an HTML5 mobile application?

I have a HTML5 mobile application where I am loading 10 images at a time from imgur when the user clicks a button. After retrieving the images, I am applying CSS formatting to adjust the height and width for proper display on an iPhone. I suspect that the ...

javascriptcsshtmljquery-mobilemobile

Using Symfony2 Knp-snappy library for PDF generation, the CSS styling is not being properly imported

Attempting to create a PDF from an html.twig template, but facing some issues... Although the content is correct in the PDF, the layout is missing. It appears that the CSS files are not being imported... Bootstrap from Twitter is being used to handle the ...

phpcsstwitter-bootstrapsymfonypdf

Configuration options for content division in a table cell

Please see the following fiddle which I have attempted: http://jsfiddle.net/9LdEc/ code: html: <div id="CorpDealerSearch"> <div class="row"> <div class="left"> Quarter To Date </div&g ...

htmlcss

Discovering elements in selenium can be achieved through various techniques such as

I am trying to locate the element "Holiday4" within the span class="fc-title". Should I use a CSS selector or an XPath query for this task? <tr> <td class="fc-day-number fc-sun fc-future hp-cal-selected" data-date="2016-02-14">14</td ...

htmlcssselenium

Programmatically Generated Checkbox Inside GridView Row Triggers Checked_Change Event

I am working with a GridView that displays user data. On the Page_Load method, I retrieve data using a DataTable and bind it to the GridView. Each row in the GridView contains a CheckBox, serving as a reference for editing a specific entity. The challenge ...

c#asp.netgridviewcheckboxoncheckedchanged

Resolve the issue with the sticky positioning

I'm dealing with a table and struggling to make the CSS sticky position work. Can someone help me troubleshoot? .table_wrapper { width: 100%; height: 400px; overflow: auto; position: relativ ...

htmlcsscss-positionsticky

What is the best way to increase padding in a Vuetify view element?

I have been attempting to increase the padding of my view by utilizing the "px-5" class on the container within the view. However, I am struggling to achieve the desired amount of padding. What I am aiming for is padding similar to what is shown in this sc ...

cssvue.jsvue-componentvuetify.js

Is it possible to make an element float or stay fixed on a web page based on the visible section of the page?

This question may be a bit confusing, but I couldn't phrase it any other way. Check out this link: Configure - Apple Store (U.S.) On the webpage, the 'Summary' box is positioned below the sub-header and aligns with the content block. When ...

javascriptjquerycssxhtml

css position:absolute stacked

Looking for a solution, I'm trying to include a side menu (navbar) on my page by using position: fixed. However, I am facing an issue where all the HTML elements I attempt to add are ignoring it. Check out the positioning problem here. ...

htmlcss

Delaying Default Event Behavior in Jquery

I have a function to manage the submit event for a form. My goal within the handler is to delay the default behavior until an Ajax function has completed its execution. Here's an example of the code: $("#some_form").on("submit", function(event){ ...

jqueryformspreventdefault

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

htmlcss

Retrieve information from various MySQL tables by using checkboxes and display the corresponding table fields based on the selected checkboxes

In my database, I have two tables for storing user information. The first table contains unique user IDs, names, contact numbers, and other personal details. The second table stores the unique ID of users from the first table along with device informatio ...

phpmysqlcheckboxradio-button

What is the best way to create a Ruby web crawler that utilizes Chrome for browsing?

Currently, I have a ruby web crawler designed to work in Firefox. How can I make the switch to Chrome instead? def open_browser() tweaked_profile = Selenium::WebDriver::Firefox::Profile.new tweaked_profile['nglayout.initialpaint.delay'] = 0 ...

rubygoogle-chromeseleniumwatir-webdriverselenium-chromedriver

Utilize Bootstrap to allow a div's background to seamlessly spread into neighboring div elements

I am looking to create a visual effect where one splat of paint merges with another splat of paint. I currently have 4 columns, each with a different splat background. Is there a way to make these backgrounds interact with each other to create a random sp ...

htmlcssbootstrap-4