How to change checkbox checked color with react?

Question

There is a checkbox component:

import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";

export const CheckBox: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
  props
) => {
  return <Input type="checkbox" {...props} />;
};

const Input = styled.input`
  ${({ theme }) => css`
    border: 1px solid white;

    &:checked {
      background-color: green;
      border-color: green;
    }
  `}
`;

I want to set its checked color to another but doesn't work. It's still the default blue background color.

I hope:

Before

After

Does this answer your question? How to style a checkbox using CSS — jsejcksn
– jsejcksn, Commented Jul 1, 2022 at 6:09
@jsejcksn accent-color doesn't work for my requirement. I only want to set the mark and border color. — Alpin Cleopatra
– Alpin Cleopatra, Commented Jul 1, 2022 at 6:20
You should conditionally render two icons one if checkbox is checked and second when checkbox is not checked — Anuj Panwar
– Anuj Panwar, Commented Jul 1, 2022 at 8:45
If you want to example snippet then let me know into comment — Anuj Panwar
– Anuj Panwar, Commented Jul 1, 2022 at 8:56
@AnujPanwar Yes, if you can show me an example will be very helpful. — Alpin Cleopatra
– Alpin Cleopatra, Commented Jul 1, 2022 at 9:28

Anuj Panwar · Accepted Answer · 2022-07-01 10:48:31Z

1

You can create own your component for that but it takes a lot of time.

Checkout into sandbox

answered Jul 1, 2022 at 10:48

Anuj Panwar

4183 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change checkbox checked color with react?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related