CSS - radio button style change when not selected

styling radio buttons css tricks
radio button css style examples
checkbox css style examples
css radio button color
pure css radio button
styling checkboxes css tricks
bootstrap radio button
html radio button checked

Is it possible to change the style of a radio button that has not been selected after the other button has been selected?

So, for example when the page is loaded, the background of radio buttons is black.

When i click Option 1, its background becomes green.

I want Option 2 background also to change to red when i click Option 1.

Sorry if the question is confusing and much thanks!!

input {
  background-color: black;
}

input:checked {
  background-color: green;
}
<div>
  <input type="radio" name="example">
  <label>Option1</label>
</div>

<div>
  <input type="radio" name="example">
  <label>Option2</label>
</div>

You have to do something like this..

$(".radioElement").change(function(){
   $(".input").addClass("inputSelectedRemoved");
   if($(this).is(':checked')){
    $(this).parent().addClass("inputSelected");
    $(this).parent().removeClass("inputSelectedRemoved");
   }   
});
.input {
    background-color: black;
    color:white;
    }

.inputSelected{
    background-color: green;
    color:white;
}

.inputSelectedRemoved{
    background-color: red;
    color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input">
    <input type="radio" name="example" value="Option 1" class="radioElement">
    <label>Option1</label>
    </div>

    <div class="input">
    <input type="radio" name="example" value="Option 2" class="radioElement">
    <label>Option2</label>
    </div>

Styling checkboxes and radio buttons using CSS, Learn how to create custom checkboxes and radio buttons with CSS. font-size: 22px; -webkit-user-select: none; -moz-user-select: On mouse-over, add a grey background color */ When the checkbox is checked, add a blue background */ So this CSS rule applies to any label that immediately follows a checked radio button..radio-toolbar input[type="radio"]:checked + label { background-color:#bfb; border-color: #4c4; } For accessibility reasons, we'd also like to change the appearance when a button has focus. We can use the same selector technique.


Just for fun, to show it can be done with CSS only, this example will work, but I really don't recommend doing it, just use one of the solutions with JS.

Since you can access the next sibling with + or further next sibling with ~ you can locate all your radio button elements first, then your labels after, this way you'll be able to access the labels as "next sibling".

With CSS you can locate the labels on the right place and even give it a background that covers the radio buttons:

.container{
  position: relative;
  display: flex;
  flex-direction: column;
}

.container div{
  width: 200px;
  padding-left: 30px;
  z-index: -1;
}

#in1:checked ~ #txt1{
  background-color: green;
}

#in1:checked ~ #txt2{
  background-color: red;
}


#in2:checked ~ #txt2{
  background-color: green;
}

#in2:checked ~ #txt1{
  background-color: red;
}

.container div{
  background-color: black;
  color: white;
}

#txt1 {
  position: absolute;
  left: 0;
  top: 0;
}

#txt2 {
  position: absolute;
  left: 0;
  top: 1em;
}
<div class="container">
  <input id="in1" type="radio" name="example">
  <input id="in2" type="radio" name="example">
  <div id="txt1">Option 1</div>
  <div id="txt2">Option 2</div>
</div>

How To Create a Custom Checkbox and Radio Buttons, Initially I was hiding this by setting display:none , but as Patryk .radio-toolbar label { display: inline-block; background-color: #ddd; This is where the real CSS magic happens – we need to use the :checked selector and the  Styling checkboxes and radio buttons using CSS The styling of checkboxes and radio buttons became possible with the introduction of the :checked pseudo-class in CSS3. This page describes two techniques: an image-based method, shown in the demonstration below, and a pure CSS method.


I think it is like this: I added an onclick attribute

    <div>
    <input type="radio" name="example" onclick="document.body.style.backgroundColor = 'green'">
    <label>Option1</label>
    </div>

    <div>
    <input type="radio" name="example" onclick="document.body.style.backgroundColor = 'red'">
    <label>Option2</label>
    </div>

   

Customize Radio Button Appearance with CSS, You can easily increase the size of the Radio Button and Checkbox icons in Please note the below icon customizations use custom CSS that does not work on mobile devices. Make Icons Larger. Go to the Style tab and scroll to the bottom of the survey preview. Click the Change the icon and label color when selected​. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


Change Icons for Checkboxes and Radio Buttons, Option 2 - this option is disabled and does not wrap, just like the other These custom radio button styles follow one of the two following markup patterns: The div class="c-radio" container serves as a styling hook, utilizing of the radio button, and the :after as the visual indicator for the checked state. The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input ( <input>) elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.


Styled Radio Buttons, <form> <fieldset> <legend>Please select your preferred contact There's not much new to note here except for the addition of <fieldset> and By default, radio buttons (and checkboxes) are styled with the can remove the native styling altogether, and create your own styles for them. Select boxes. Moving swiftly on. The markup for our select boxes is a little different, but you may notice some similarities. Like the checkboxes/radio buttons, we have a .control-group to wrap our elements in. We also have an element called .select wrapping our standard select field, as well as a custom .select__arrow.


<input type="radio">, Given a form containing radio button element and the task is to check whether a radio button is selected or not with the help of JavaScript. If no one radio button is selected then it returns 'No one selected'. h1 style = "color:green;" > to return the first element that matches the specified CSS selectors in the document. In this article I will explain how to make a single radio button selection in a GridView using JQuery and how to change a selected row style of a GridView with a radio button using jQuery.