Unable to give the border color to the checkbox

Asked Oct 01 '20 at 10:01

Active Oct 01 '20 at 10:01

Viewed 46 times

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

asked Oct 01 '20 at 10:01

Sanjana

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
@ManirajMurugan - Thanks This works for me :) – Sanjana Oct 01 '20 at 13:06

Unable to give the border color to the checkbox

0 Answers0