0

My task is to modify "tick" inside of the checkbox to "dash". I am new to css and so far I see that I need to modify this bit to have the "dash". I will appreciate if someone points me to documentation and suggest a solution which parameters can be used to do this.

input[type='checkbox'].input-checkbox {

&::before {
    border-bottom: 5px solid $charcoal;
    border-right: 5px solid $charcoal;
    content: '';
    height: 20px;
    left: 9px;
    opacity: 0;
    position: absolute;
    top: 2px;
    transform: rotate(45deg);
    transition: $transition-default;
    width: 11px;
    z-index: 1;
}

Thanks!

Bill Lumbert
  • 4,633
  • 3
  • 20
  • 30
  • 1
    I don't think you can edit that at all, as this is browser native (unless I'm wrong, someone please correct me). The `&::before` is LESS, not CSS, so you won't be able to use that anyway. I'm pretty sure you cannot change the checkbox tick, or the radio dot. – Lee Aug 18 '16 at 10:52
  • checkout https://codepen.io/bbodine1/pen/novBm – z0mBi3 Aug 18 '16 at 11:02
  • There is no way to edit the native feel of the input fields. If you want to change the feel of checkbox, please use input + label as explained in the following link http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953 – sameer Aug 18 '16 at 11:02
  • Try This - [**JSFiddle**](https://jsfiddle.net/ghxjoys6/) – Karthikeyan Vedi Aug 18 '16 at 11:22

1 Answers1

0

You can't change that I think. What you could do is create a custom checkbox using css or a background image. Wrap the label around the input and set background image to the label. You can then set opacity: 0 for the input.

Wim Mertens
  • 1,780
  • 3
  • 20
  • 31