How do I change the color of the check box?

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

Denis Correia free asked 6 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>

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

<p>Hi there Denis,</p>
<p>Yes, the <code><InputSwitch></code> 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.</p>
<p>1. Copy the CSS (or particular colors you are fond of) from <a href="https://mdbootstrap.com/components/bootstrap-switch/#colors">here</a> and paste them into a CSS file under a name of your choosing (for clarity's sake let's call it <code>SwitchColors.css</code> for now). Place the file into the same directory where the <code>.js</code> file with <code><InputSwitch></code> is.</p>
<p>2. Add the following line to the <code>.js</code> file, best beneath other imports you probably already have there: </p>
<pre><code> import './SwitchColors.css';</code></pre>
<p>3. Pass in the color class you want, like </p>
<pre><code> <InputSwitch className="warning-switch" checked={this.state.switch} onChange={this.handleSwitchChange}></InputSwitch></pre>
<p></code></p>
<p>4. Enjoy the colorful switches, they are the bomb!</p>
<p>Hope it helps!</p>
<p>With Best Regards,<br />
Kuba</p>

Please insert min. 20 characters.

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

Add comment

Marta Wierzbicka staff answered 6 years ago

1 0 Best answer

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

Denis Correia free commented 6 years ago

Does this work in the React version?

Denis Correia free commented 6 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Denis Correia

0Support score
12Questions 0Answers 0Snippets