Styling a Form.Check (checkbox) control in react bootstrap

Question

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

Ziwei Lin · Accepted Answer · 2020-03-01 03:35:29Z

4

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

answered Mar 1, 2020 at 3:35

Ziwei Lin

414 bronze badges

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

Comments

user11412912 · Accepted Answer · 2019-10-11 12:46:00Z

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>

Collectives™ on Stack Overflow

Styling a Form.Check (checkbox) control in react bootstrap

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related