How do I change the color of the check box?


Topic: How do I change the color of the check box?

Denis Correia asked 7 years ago

By default it's coming purple, <divclassName="col-lg-6"> <Input "label="Ativo"onChange={this.ativar}checked={this.state.formapgto.ativo === 1}filledtype="checkbox"id="checkbox"/> </div> and with the switch component, I could change the color and have the freedom to choose the values ​​instead of just "on" and "off"
<InputSwitch></InputSwitch>

Marta Szymanska staff pro premium answered 7 years ago

Hi, try to use a CSS code from our documentation: https://mdbootstrap.com/components/bootstrap-switch/#colors Best, Marta

Denis Correia commented 7 years ago

Does this work in the React version?

Denis Correia commented 7 years ago

I'm trying something like <div> <div><divclassName="switch teal-switch"></div> <div><label></div> <div>Inativo</div> <div><inputtype="checkbox"></input></div> <div><spanclassName="lever"></span></div> <div>Ativo</div> <div></label></div> <div></div></div> </div> but it does not work.

Jakub Strebeyko staff answered 7 years ago

Hi there Denis,

Yes, the <InputSwitch> component makes up exactly the markup you mention. Please note, though, that the CSS necessary to have it change color is not part of our essential package. It means you have to do it yourself, and best way to do it would be through an additional style sheet imported to an interface your working on.

1. Copy the CSS (or particular colors you are fond of) from here and paste them into a CSS file under a name of your choosing (for clarity's sake let's call it SwitchColors.css for now). Place the file into the same directory where the .js file with <InputSwitch> is.

2. Add the following line to the .js file, best beneath other imports you probably already have there:

 import './SwitchColors.css';

3. Pass in the color class you want, like

 <InputSwitch className="warning-switch" checked={this.state.switch} onChange={this.handleSwitchChange}></InputSwitch>

4. Enjoy the colorful switches, they are the bomb!

Hope it helps!

With Best Regards,
Kuba


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No