0

Hi My objective is to change the color of the checkbox into white color when it is checked, and background color black, i can change the color of the checkbox but i could not see checkbox and tickmark. I've tried to add border for the checkbox but didn't got result as expected.


<Checkbox
          checked={this.state.checkedF}
          onChange={this.handleChange}
          classes={{checked: "checked-display"}}
  />

.checked-display{
color: white
}

Can anyone help me in this query? so that i could get a black tick as well as black border around the checkbox

Sanjana
  • 286
  • 2
  • 7
  • 20
  • HTML Checkboxes can't be styled easily but there are workarounds and existing answers on this site explain these. https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css/4148544#4148544 – Richard Hunter Oct 01 '20 at 10:06
  • Take a look ak comment's fiddle bellow the question [here](https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css#comment89877803_34389136) – mArtinko5MB Oct 01 '20 at 10:08
  • Whether this is your expectation? https://codesandbox.io/s/vigilant-cohen-4ztiq – Maniraj Murugan Oct 01 '20 at 10:15
  • @ManirajMurugan - while we click on checkbox, the tick mark color should be black and checkbox border should be black. – Sanjana Oct 01 '20 at 10:45
  • 1
    @Sanjana, Could you check this? https://codesandbox.io/s/upbeat-hermann-pcj90 I have made use of ```withStyle``` here.. – Maniraj Murugan Oct 01 '20 at 11:20
  • @ManirajMurugan - Is there any possibility to make make it through css? – Sanjana Oct 01 '20 at 11:23
  • @Sanjana, You mean without material-ui? Pure css way? – Maniraj Murugan Oct 01 '20 at 11:26
  • @ManirajMurugan - Yes Correct – Sanjana Oct 01 '20 at 11:46
  • @Sanjana, Just check whether this helps https://codesandbox.io/s/beautiful-cookies-0fc2z and here there are more css code written to achieve it.. So not sure whether this will work in your way.. – Maniraj Murugan Oct 01 '20 at 12:19
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/222361/discussion-between-sanjana-and-maniraj-murugan). – Sanjana Oct 01 '20 at 12:21
  • 1
    @Sanjana, Hope this helps you https://codesandbox.io/s/billowing-haze-94h5c .. – Maniraj Murugan Oct 01 '20 at 12:54

0 Answers0