Is there a way to alter the color of radio buttons?

Is there a way to use CSS to change the background color of a radio button? I've searched online, but all the solutions I found involve JavaScript, which I don't fully understand. I attempted this CSS code, but it didn't have the desired effect:

input[type="radio"]:checked {
  background-color: red;
}
<div class="sound-signal">
  Audible Signal:
  <input type="radio" name="soundsignal" id="soundsignal" checked="checked">
  <label for="soundsignal">Yes</label>
  <input type="radio" name="soundsignal">
  <label for="soundsignal">No</label>
</div>

htmlcss

Answer №1

There are a couple of methods to customize the styling of radio buttons (and checkboxes as well) using just CSS:

  • You can achieve this by styling the label's pseudoselector and hiding the actual radio buttons

    /* hide the radio button completely */
input[type="radio"] {
  display: none;
}

/* create custom radiobutton style using pseudoselector */
input[type="radio"] + label:before {
  content: "";
  /* design custom radiobutton appearance */
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  margin-right: 5px;
  background-clip: content-box; /* background-color only for content */
  border: 1px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* define style for checked radiobuttons */
input[type="radio"]:checked + label:before {
  background-color: red;
}

/* reset default box-sizing */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* additional styles for centering radiobuttons */
.sound-signal label {
  display: inline-flex;
  align-items: center;
}
    <div class="sound-signal">
  Sound signal:
  <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">
  <label for="soundsignal1">Yes</label>
  <input type="radio" name="soundsignal" id="soundsignal2">
  <label for="soundsignal2">No</label>
</div>

  • Another approach is to remove the standard appearance using appearance: none in CSS and then add custom styling. Keep in mind that this method won't work in Internet Explorer.

    input[type="radio"] {
  /* get rid of default background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* design custom radiobutton appearance */
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  background-clip: content-box; /* background color only for content */
  border: 1px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* style for checked radiobutton */
input[type="radio"]:checked {
  background-color: red;
}

/* optional styles for centering radiobuttons */
.sound-signal {
  display: flex;
  align-items: center;
}
    <div class="sound-signal">
  Sound signal :
  <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">
  <label for="soundsignal1">Yes</label>
  <input type="radio" name="soundsignal" id="soundsignal2">
  <label for="soundsignal2">No</label>
</div>

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

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

When running two ajax calls, I encounter an issue where the second call loads some HTML onto the page that is needed for processing a specific div in the first call. However, since the div is not present until after the second call is completed, I receiv ...

javascriptjqueryhtmlajax

Position the background in CSS according to the class name

There are a total of 8 icons, with 4 in blue and 4 in grey. Therefore, product 1 has both a blue icon and a grey icon. When the user has product 1, they will see the blue icon (with an added class on the container called .gotProduct), and when they don&ap ...

jqueryhtmlcss

Utilizing DataTables to dynamically populate a table with data fetched from an AJAX request

I'm currently in the process of developing a program that showcases various topics within a specific subject. My main query revolves around whether or not the DataTable functionality will be compatible with this particular setup. The following is th ...

htmljqueryajaxdatatablesweb-deployment-project

`place the table inside a hidden div`

I am trying to create a non-editable table that can be overlayed with a div under specific conditions. However, it seems like my current implementation is not working as expected. What could be causing this issue? CSS <style type="text/css"> # ...

htmlcss

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

One of the goals for my app is to have multiple themes, including Angular Material themes, with the ability to define custom colors for specific components and elements that are not part of Angular Material. It's important that when I change a theme, ...

cssangularsassangular-material

Automatically submit a PHP form if the input text box is left blank

I need a way to automatically refresh the data on my page when the textbox is empty. Manually submitting the form works perfectly, but I want it to happen automatically if the textbox is empty. The catch is that I don't want the form to submit while t ...

javascriptphphtmlforms

Tips for arranging two svg elements next to each other within a larger div

Hey everyone, I've been working on some HTML and JavaScript but I'm stuck on a basic issue. I have a simple code with a div containing two inner divs, each with an SVG element equal to the size of the parent div. My goal is to have these two inne ...

htmlsvg

The execution of the function halts as soon as the player emerges victorious

In my attempt to create a basic game where players compete to click their designated button faster to reach 100%, I am in need of assistance with implementing a logic that determines the winner once one player reaches or exceeds 100. Essentially, I want ...

javascripthtml

What causes the incompatibility between Bootstrap responsive tables and Angular's 'dir-paginate'?

Why is the bootstrap responsive table not functioning properly with dir-paginate? I successfully created a responsive grid HTML table using bootstrap with static data, but when my angular developer colleague incorporated 'dir-paginate' to fetch d ...

htmlangularjstwitter-bootstrap

Modify the scrolling functionality to ensure that fixed elements remain visible even on smaller screens

I am facing an issue with a fixed div on my webpage. When the height of the div exceeds the viewport height of the browser, I am unable to scroll within the div itself as the background scrolls instead (due to the position being fixed). For example: < ...

htmlcsstwitter-bootstrap

What is the best way to showcase accurate information retrieved from mySQL?

I'm currently facing an issue with querying a database and displaying the results. The query is supposed to be based on input from an HTML form. Strangely, when I input a name like "John" into the form, even though there are 2 entries in the table wit ...

phphtmlmysqlxampp

Creating a tooltip with a left arrow and a bordered design

I am looking to create a tooltip that displays its content after clicking on the tooltip tip icon. Currently, it only works on hover, but I want it to be clickable and mobile responsive. Desktop design should resemble: https://i.sstatic.net/FQPyt.png Mob ...

javascriptjqueryhtmlcssbootstrap-4

Mobile Website Blog Page With Dual Sidebars Issue

I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section. Everything looks great on Desktop view. However, when viewed on a mobile phone, the order changes to: left-sidebar>content> ...

htmlcssbootstrap-4

Differences in Spacing: Exploring Bootstrap v5.1.1 Compared to 4.0

After comparing two pages, one using Bootstrap v5.1.1 and the other with 4.0.0, I have observed differences in spacing. Bootstrap v5.1.1: .topspacer { padding-top: 70px; } .righticon { float: right; } .clear { clear: both; } a { text- ...

htmlcssbootstrap-4paddingbootstrap-5

Replacing variables in a function: A step-by-step guide

I have frequently used the replace function to eliminate classes in JavaScript. Currently, I am working on creating a JavaScript function that allows me to remove a specific class from an element by passing in the element and the class name. changeAddress ...

javascripthtmlregexjavascript-objects

Text overlay effect on hovering an image

I am struggling to add text to a photo and make the entire photo clickable with a link. I have already applied a darkening effect that I want to keep, but now I need to insert text on top of it. It is important for me to maintain the current dimensions and ...

htmlcsshover

SQL Server database is showing question marks instead of HTML symbols

Recently, I observed that special HTML symbols like: ★ are appearing as question marks in my database records. I have set the type of the field as varchar and am utilizing Microsoft SQL 2008 for my database management. Is there a solution to this symbo ...

htmlsql-serversymbols

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

javascriptphphtmlcssgallery

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

javascriptcssclasshtml

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

javascriptcssselenium