Issues with Radio Buttons and Checkboxes in Google Chrome

Recently, there seems to be an issue with radio buttons and checkboxes on my website after a Google Chrome update. I have not made any changes to the CSS in months and everything works fine on other browsers like Firefox, Safari, IE9, and IE10.

If you want to see the problem, check out this jsFiddle example (with a link to my CSS file):

http://jsfiddle.net/v22WB/

<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car

Even after removing all styles using Chrome's dev tools, the issue persists. My website uses Twitter Bootstrap 2.0.2, but when I load the file separately, everything displays correctly. Any suggestions?

csstwitter-bootstrapgoogle-chromecheckboxradio-button

Answer №1

There is a particular line in your CSS file that you should pay attention to: 

html body *:focus{outline-color:transparent;outline-style:none;-webkit-appearance:none}

The -webkit-appearance:none part is causing input elements that have focus (such as selected radio buttons or checkboxes) to not be displayed as input elements visually. For more information, check out this link on customizing input styles. Removing that specific part of the code should bring your checkboxes back to their normal appearance.

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

Converting nested lists into Miller Columns: a step-by-step guide

I am interested in creating a series of interactive nested lists using Miller Columns design. The idea is that when you click on a parent item, it expands to reveal the next level of the list. While I have come across solutions that involve parsing data a ...

jqueryhtmlcss

Bootstrap 4 does not have the capability to include spacing between two columns

I'm encountering an issue with adding a gutter between 2 columns on my website layout. I have a row that needs to be 1280px wide (based on a reference resolution of 1366x768 with padding of 43px on each side of the page), containing two sections that ...

cssbootstrap-4

Ways to customize the default font in themes by using locally stored fonts

Currently, I am utilizing Quarto for the creation of a website and attempting to modify the default fonts within a specific theme. My ultimate objective is to incorporate local Google fonts rather than relying on the Google API. In my _quarto.yml file, it ...

cssquartogoogle-fonts

Issues with the styling of HTML code

Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu i ...

javascripthtmlcss

Arrangement of Columns in a Vertical Bootstrap Layout

When the xs layout displays as expected, how can I move the sidebar up to the navigation in order to eliminate the gap between them in the lg layout? <div class="row"> <div class="col-xs-12 col-lg-3 col-lg-push-9"> navigation & ...

htmlcsstwitter-bootstrap

Utilize visuals to select premade designs

I am looking to enhance the user experience in selecting templates on Wordpress by integrating images for a visual preview. Instead of a traditional text-based dropdown menu, users would be able to see what the template looks like before choosing it. EDIT ...

htmlcsswordpress

CSS3 stackable-design

How can I avoid CSS3 elements from overlapping? They are all <span> precious </span> <span> and </span> <span> cute </span> And here is my current CSS code span { margin : 20px; min-width: 150px; border-r ...

css

Enhanced Vertical Space Produced on my Website in Firefox

For some reason, Firefox is adding an extra 250px at the end of my website below the footer. I have not been able to determine why this is occurring. Note: The site functions properly on all other browsers; the issue is specific to Firefox. You can view ...

htmlcssfirefox

Flexbox and CSS3 width/height declarations causing problems with vertical alignment

Struggling to vertically center a nav element and align it to the right of the screen? There seems to be something causing it to shift slightly off-center. In this setup, the red represents the flex container, the green is the header, and the grey box is ...

htmlcssvertical-alignmentflexbox

Trouble with a Userscript focused on Styling

Starting off by admitting my limited knowledge in coding, I am determined to finish this simple script. Despite being aware of the script's limitations, I am struggling to understand why it is not functioning as intended. I have attempted to utilize f ...

javascriptcss

Is there a way to conceal the scrollbar in the mobile view (on a mobile device or emulator) in a React application without disrupting the scrolling functionality?

I am looking to conceal the scrollbar on mobile devices throughout my app while still allowing users to scroll. I have attempted to hide the scrollbar using CSS properties like scrollbar, scrollbar-thumb, scrollbar-thumb:hover, and scrollbar-track. This ...

htmlcssreactjs

Issue with displaying Bootstrap 4 Navbar toggle on iPad devices

I am encountering an issue with the Navbar header in Bootstrap 4 beta on my iPad. While it works perfectly on small devices, it is not displaying correctly on my iPad. Can someone please assist me in fixing this issue? If you need to see the problem in act ...

twitter-bootstrapbootstrap-4

Is there a way to apply textTransform to all components across the board?

I need to ensure that all text in my muiv5 project is capitalized by default, unless specifically overridden using sx or individual component styling. My attempted solution: <ThemeProvider theme={theme}> <IntlProvider locale="en& ...

cssreactjsmaterial-uinext.js

Ways to eliminate spacing between two select boxes?

Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...

htmlcss

Can you explain the conflict between using float and setting the height to 100% for divs?

Check out the following HTML code example: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> html, body { padding: 0; m ...

htmlcssheight

Unexpected issue encountered for identifiers beginning with a numerical digit

Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...

javascriptjquerycss

Deselect Certain Categories of Automatically Generated Tick Boxes

I have implemented some visually appealing "checkboxes" using li, span, and bootstrap glyphicon elements. These checkboxes display an active state when checked by adding the .active class. Upon activation of the active class, a hidden div beneath the boot ...

javascriptjqueryhtmlcsscheckbox

Navigate through AJAX Live search using arrow keys and mouse controls

I have encountered an issue with the autocomplete feature on my webpage. Although I am able to input suggestions, I am unable to navigate through them using the mouse pointer initially. Oddly enough, if I press the up/down keys once after the list items ar ...

phpjqueryhtmlcssajax

Leverage Bootstrap modal to integrate with a separate form and database table

I have created a form that updates an SQL table named "invoices". Now, I am trying to implement a Bootstrap modal that will update another SQL table called "customers". The issue I am facing is that only the customer name is being saved properly. Is there ...

phpjquerymysqltwitter-bootstrap

Disable the border and background colors in CloudFlare Turnstile

I have implemented the CloudFlare reCaptcha Turnstile and I am looking to modify the widget by removing the border and background color. I believe this customization can be achieved using CSS or Javascript. Thank you for any assistance! ...

javascriptcssrecaptchacloudflare