Removing hover effect in ant-checkbox

[Saicharan0662]

Can we remove the blue hover effect in the ant-checkbox. I tried to remove using CSS but no progress.
If there is any way, please let me know.
Thanks!

[valcosmos]

Hello, I tried this, it does work.

Hope it can help u.

In App.tsx

import { useState } from 'react'
import { Checkbox } from 'antd'
import 'antd/dist/antd.css'
import './App.css'
import type { CheckboxChangeEvent } from 'antd/es/checkbox';

function App() {
  const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`)
  }
  return (
    <div className="App">
      <Checkbox onChange={onChange}>Checkbox</Checkbox>
    </div>
  )
}

export default App

In App.css

.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner {
  /* border-color: #1890ff; */
  border-color: #d9d9d9 !important;
}

[Saicharan0662]

Thank you so much! It worked!!

[Fatimaarshad10]

Thanks.