The custom checkbox feature is not appearing on Google Chrome browser

I need help creating a custom checkbox in HTML using CSS. It works fine in IE, but in Google Chrome, it's displaying the default checkbox instead of my custom one.

What changes do I need to make for it to work in Chrome?

HTML

<link href="btn.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="checkbox" class="check" />
</body>

CSS

.check {
    width:81px;
    height:78px;
    border: 3px ridge;
    border-color:red;
    border-style:outset;
    font:Verdana, Geneva, sans-serif;
    font-style:italic;
    font-size:16px;
    font-weight:bold;
    color:red;
}

Answer №1

It appears that customizing checkbox styles in WebKit (the engine powering Chrome) is an all-or-nothing endeavor.

You have the option to eliminate default styles completely by using -khtml-appearance: none (although you may now need -webkit-appearance: none, or simply appearance: none), but this will essentially remove all visible checkbox styling, prompting you to reconstruct the entire look using the :checked pseudo-class and background images.

Check out these resources for more information:

Answer №2

The reason for this discrepancy is that Internet Explorer supports CSS properties that should not apply to checkboxes. Chrome and Firefox adhere to the correct standards in this regard. You have the option to use a background image as a checkbox design or create a custom one using JavaScript.

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

Using CSS3 to shift a div in relation to another moving div

Take a look at this JSfiddle. I am trying to make the "Push this!" div move when the menu resizes/expands on hover. Is it possible to achieve this effect using only CSS? <div id="nav"> <ul> <li><a href=""><span>01</spa ...

Tips for shutting down the camera within a modal by utilizing Html5 QrCode Scanner in ASP.NET MVC

Hey there! I'm currently working with the Html5 QrCode library to implement a scanner, and I've integrated it into a modal. However, I'm facing an issue where the camera continues running even after I close the modal. I'm wondering if t ...

Hiding overflow when navigating back a page in Safari

I need help finding a solution to this issue. On my website, the results page works perfectly fine until I navigate to a product's details page and then return to the results using the "page before" button. At that point, the overflow becomes hidden, ...

Prevent a div from scrolling once it reaches the end of its content, while allowing the other div to continue

I am trying to make the col-md-4 column stop scrolling once it reaches the end of the content, similar to the right sidebar on Facebook. I have attempted using jQuery to add a fixed position when it reaches the bottom, but it is not working as expected. Th ...

Text successfully inserted into the input field using Xpath

I need help with the following issue: I am trying to use Selenium to verify if an input field contains a specific text that has been manually entered. Here is an example of an input field with the value '50': <input type="text" class="value ...

The "pointer" cursor style is simply not functioning in any way

Here is the angular template code I am working with: <!-- Modal --> <ng-template #levelsmodal let-c="close" let-d="dismiss"> <div class="modal-header"> Select the levels you want to show in the table and chart ...

Can you explain the distinction between using .hover and :hover?

Recently, I came across some CSS code that was written by someone else and it contained the following: li.hover, li:hover { } This made me curious - is there a distinction between .hover and :hover in CSS? Could it be possible that certain browsers inte ...

The changing of colors does not function properly when clicked in JavaScript

I am having an issue with a drop-down list that offers two options: blue and green. When I select blue and click on the text input field, its background color alternates between blue and black (the default text field color). The same applies when I choose ...

The grid layout is being disrupted by a concealed input

As I work on styling my admin panels with Twitter Bootstrap, I've encountered a strange issue. Upon testing in Chrome 28 and Firefox, adding a simple hidden input seems to disrupt the grid layout. If the hidden input is moved into div.span6 or remove ...

Display outcome generated by JavaScript in the input box

I've successfully implemented a date/time picker in a form. Using JavaScript, I've created a script to calculate the difference between two date fields and display it in a third field labeled Course Duration. However, I'm encountering an i ...

React Card with Overflowing TableCell Texts

I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...

Is it possible to connect ng-model with a style tag?

Is it feasible to create a basic template editor using angularjs where an input field with an ng-model can be connected to a style tag to control the css on an entire page rather than applying it to a specific element with inline styling? Could something ...

Position an image in the center and add a div below it

I am seeking guidance regarding two specific questions. My objective is to showcase an image in its true size while positioning it at the horizontal center of the screen (not the exact center), followed by a div containing text directly underneath the imag ...

Is there a way to hide a button on this virtual keyboard after it has been clicked?

After creating a virtual keyboard using HTML and CSS, I am looking to implement JavaScript code that will hide a button after it is clicked. Here is the code I have tried so far: function hideButton() { var button = document.getElementById("simple_butto ...

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...

Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

When visiting a website, you may notice menus that display sub-menus when hovered over. These menus and sub-menus are created using div elements, with the sub-menus hidden initially using style.display = none; The issue arises when a sub-menu is opened an ...

Is there a way to customize the color of the bar displaying my poll results?

My poll features two results bars that are currently both blue. I attempted to change the color of these bars but was unsuccessful. I've searched for solutions on stack overflow, specifically How can I change the color of a progress bar using javascr ...

Display radio options when clicked upon

I am in the process of creating a set of radio buttons that will be utilized for capturing values to generate a subscription/modal checkout. My current situation involves having the radio button options visible. However, I aim to achieve a functionality wh ...

tips for building angularjs widgets with limited scope

Is there a way to generate widgets from HTML scripts on a webpage? For example: <script type="text/html" id="widget-simple"> <div class="widget-simple"> This is my widget and its name is {{ test }} </div> </script> & ...

Place a JavaScript code block within a designated div container

I'm currently working on revamping the appearance of the header area for this website. My goal is to replace the background image with a rectangular JavaScript ad positioned to the right of the logo. However, I've encountered difficulty due to th ...