I am a beginner in react and bootstrap. I would like to know - How can I style the Form.Check (checkbox) so that the default look and feel can be overridden with a better style. (say a switch or any other look and feel).

This is what I tried (I used a css style but it is not working as expected):

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;
  }

I am a beginner in react and bootstrap. I would like to know - How can I style the Form.Check (checkbox) so that the default look and feel can be overridden with a better style. (say a switch or any other look and feel).

This is what I tried (I used a css style but it is not working as expected):

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;
  }

• javascript
• css
• reactjs
• react-bootstrap

2 Answers 2

Try change: .form-control [type=checkbox] to .form-check for CSS styling. This works for me when using <Form.Check/>

This is a dump from my php code, this could be something to look at.

/**
 * Checkbox Two
 */
.checkboxOne {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 20px 60px;

    border-radius: 50px;
    position: relative;
}
}

/**
 * Create the line for the circle to move across
 */
.checkboxOne:before {
    content: '';
    position: absolute;
    top: 19px;
    left: 14px;
    height: 2px;
    width: 90px;
    background: #111;
}

/**
 * Create the circle to click
 */
.checkboxOne label {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;

    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 12px;
    background: #ddd;
}

/**
 * Create the click event for the checkbox
 */
.checkboxOne input[type=checkbox]:checked + label {
    left: 84px;
    background: #26ca28;
}

<section>
  <h3>Switch</h3>
    <div class='checkboxOne'>
        <input type='checkbox' value='1' id='checkboxOneInput' name='' />
        <label for='checkboxOneInput'></label>
    </div>
</section>