The radio buttons in Google Chrome are displaying an unwanted white background around the circle, which is not the intended behavior as seen in Firefox.
Please refer to these images for comparison.
For a direct example of the issue on the page, please visit the following link and view it in both Firefox and Chrome:
Are there any CSS techniques that could resolve this issue specifically for Chrome?
It has come to my attention that there is a known bug in Chrome for which there are unfortunately no concrete workarounds.
In light of this issue, the workaround I currently recommend involves using a sprite sheet with images of the checkbox options. I have created a fiddle showcasing this solution using a random sprite found online:
Here is the HTML code snippet:
<div id="show">
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p />
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
Below is the CSS code used for styling:
div#show {
width:100%;
height: 100%;
background:black;
margin: 10px;
padding: 10px;
}
input[type="radio"] {
/* Uncomment this to only see the working radio button */
/* display:none; */
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}
If desired, you can create your own custom sprite featuring radio buttons in your preferred style...
I trust this information proves helpful. Should you have any further queries, please feel free to reach out.
-Hannes
To achieve a circular radio element, wrap it in a div with overflow set to hidden and border-radius to 100px. Then, display the radio input as block with no margin. Here is an example:
HTML:
<div class="custom-radio">
<input type="radio" id="radio1" name="radio1">
</div>
CSS:
.custom-radio {
display: inline-block;
border-radius: 100px;
overflow: hidden;
padding: 0;
}
.custom-radio input[type="radio"] {
display: block;
margin: 0;
}
While this discussion may be from a while back, I encountered the same issue and had to spend some time troubleshooting it before finding a solution. Interestingly enough, the fix came about quite unintentionally. As I was focusing on something else and zoomed in on the page using ctrl and scroll, I noticed that the radio button no longer had a white background (and looked much better). So, I simply added:
zoom: 0.999;
to the appropriate css class, resolving the issue for me.
Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here const customStyles = theme => ({ root: { ...theme.typography.button, background ...
function adjust_width() { $('#cont').toggle(function(){ $('#cont').animate({marginLeft:'0%'}); },function(){ $('#cont').animate({marginLeft:'18.4%'}); }); } The code above is in ...
Is there a way to customize the background color of each individual .col-5 within the same row while using Bootstrap and a custom CSS file? Changing the styles for one column seems to affect all columns with the same class name. Edit: I'm looking f ...
Currently, I am adding a file upload feature to my application. I have created input fields for various types of media. <label>Images<input type="file" accept="image/*"/></label> <label>Videos<input type="file" accept="video/*"/ ...
Is there a way to modify the text "Paid on" in the backend order details page of WooCommerce? I have already implemented this for BACS and local pickup payment methods. Replace a specific word for BACS payment method in Woocommerce order edit pages I am ...
I am currently in the process of creating a webpage and I want to ensure that it is responsive by adjusting certain values based on the width of the viewport. Specifically, I have a DIV element that I want to split into 2 columns. For smaller screens (min ...
Here is an example of an element in an Angular2 app: <div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}"> I would like to enhance the style b ...
I'm attempting to include a loading animation GIF in my Cycle 2 plugin. Is there a way to ensure that the GIF loads before the images? Right now, I have set my loading.gif as a background image. The issue is that the loading.gif isn't displaying ...
Looking to add animation to a list moving from left to right and vice versa. Now, I want the list to animate from left to right when the mouse hovers over the div, and then animate from right to left when the mouse leaves the div. Can someone assist me wit ...
Can a web page be designed so that when users open it and hover their mouse over a specific area outside of an image, the mouse is attracted to the image as if by a magnet? Is this idea feasible? Any suggestions would be appreciated. ...
Exploring a new way to arrange images in grid style with a box underneath. Seeking advice on achieving this specific layout shown in an image. Current progress in positioning can be seen in this screenshot. Desired adjustments include aligning the far ri ...
I have implemented the following code to integrate a captcha generating web service. The response data is successfully obtained, but when I attempt to display the result within a div element, the image appears as distorted text. var xmlHttp = new XMLHtt ...
Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...
<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...
I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...
Hey there! Check out this awesome site for Music Videos: (Music Videos(Player)) I've been testing different options, but if you have a better suggestion, please let me know. Any help would be really appreciated. If I can't figure it out on my o ...
Referenced from Microsoft Docs In MVC, the Razor engine automatically encodes all output coming from variables. For example, consider the following razor view: @{ var untrustedInput = "<"123">"; } @untrustedInput In this scenario, ...
I have been working on a script that is supposed to retrieve the attribute of an element and then click on it if the value is true. However, I keep encountering an error in my code. This is the snippet of code I am using: from selenium import webdriver d ...
I am trying to trigger my keyframe animations when the .show class for the popup window is added through JS, but currently the animation only activates upon page load. This is the JavaScript code I have: <script type="text/javascript"> $(document) ...
I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...