I am new to React and Bootstrap. I have a question about styling Form.Check (checkbox) components. How can I customize the default appearance to achieve a different look, such as a switch or another style?
Here is what I have attempted so far (I tried applying a CSS style without success):
MyForm.js
import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';
class MyCustomClass extends React.Component {
constructor(props) {
super(props);
render()
{
return (
<div>
<br />
<h3>Page Title</h3>
<Form>
<Form.Group >
<Form.Check
type="Checkbox"
label="Click me"
/>
</Form.Group>
</Form>
</div>
)
}
}
}
MyForm.css
.form-inline {
width: 100%;
}
.form-group {
width: 90%;
}
.input-group {
width: 90% !important;
}
.form-control {
width: 67% !important;
}
//This makes no difference
.form-control [type=checkbox] {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}