CODEWITHSUNDEEP
htmlcssreactjsstyled-components
Alpin Cleopatra
Alpin Cleopatra

Reputation: 389

How to change checkbox checked color with react?

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

enter image description here

After

enter image description here

Upvotes: 0

Views: 10532

Answers (1)

Anuj Panwar
Anuj Panwar

Reputation: 408

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

Checkout into sandbox

Upvotes: 1

Related Questions