Html Question posted in
Some basic documentation can be found here.

Html – How to remove color of input[type="radio"] getting dark and light on hover and click

I have some inputs of type radio. I have change the colour of inner and outer colour using the property of accent-color. Now the problem is open hovering over it makes it more darker and when it is clicked (keeping mouse button clicked and not removing the finger from clicked), it makes it more lighter.

You can also seen in the snippet. I tried putting background-color: transparent but nothing works.

Expected Result: I just want to keep the red color as it is, not making it more darker on hover or lighter upon pressed click. Color red is for example and actually I am using other colors too.

input[type="radio"]:checked {
            accent-color: red;
}
input[type="radio"]:hover {
            accent-color: red;
}
.radio {
   width: 60px;
   height: 60px;
}        
        
<input type="radio" class="radio">
Tags:

2

Answers


  1. 0

    You do not need any JavaScript to do this, nor to customize radio buttons at all.

    You can use the CSS appearance property as well as some browser-fixed versions of it like -webkit-appearance for responsiveness.

    Here is an example of a radio button that I set appearance to none which removes the border you see around the radio button. Then, I made a fake border which represents the old one so this border stays the same even when hovering it:

    .radio {
  width: 60px;
  height: 60px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #91919e;
  border-radius: 100%;
}

input[type="radio"]:checked {
  border-color: red;
  background-color: red;
}

input[type="radio"]:checked:hover {
  border-color: #d80000;
  background-color: #d80000;
}

input[type="radio"]:checked:active {
  border-color: #b70000;
  background-color: #b70000;
}
    <input type="radio" class="radio" name="test">
<input type="radio" class="radio" name="test">

    Note that this code was just made to mimic the old radio button, but you can change all of the CSS to fit your specific needs.

    Login or Signup to reply.
  2. 0

    One way, without JS, is to keep the radio button(s) but encase them in divs which have an after pseudo element on top which has the wanted styling when the input is checked.

    <style>
  .radio-wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
    display: inline-block;
    margin: 10px;
  }
  
  .radio-wrapper::after {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: red 2px solid;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .radio-wrapper:has(input:checked)::after {
    background-image: radial-gradient(red 0 30%, transparent 30% 100%);
  }
  
  input {
    opacity: 0;
  }
  
  .radio {
    width: 60px;
    height: 60px;
  }
</style>
<div class="radio-wrapper"><input type="radio" class="radio" name="test"></div>
<div class="radio-wrapper"><input type="radio" class="radio" name="test"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search