CODEWITHSUNDEEP
htmlcsssass
ViktorasssIT
ViktorasssIT

Reputation: 387

How to style Input checkbox checked arrow? Css

I have created a span & an input checkbox, but can't figure out how to style the checked arrow by given design which is where the checkbox is checked:

enter image description here

HTML:

  <label class="form-label">
    <input id="checkbox" type="checkbox">
    <span>title</span>
  </label>

CSS:

 .form-label {
  display: inline-flex;
  cursor: pointer;
  position: relative;
  }

 .form-label > input {
  height: 20px;
  width: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid #CDCDCD;
  border-radius: 4px;
  outline: none;
  background-color: #ffffff;
  cursor: pointer;
  }

 .form-label > input:checked {
  border: 1px solid #000000;
  background-color: #ffffff;
  }

  .form-label > input:checked + span::before {
  content: '\2713';
  display: block;
  text-align: center;
  color: #000000;
  position: absolute;
  left: 4px;
  top: -1px;
  }

 .form-label > input:checked + span::before:focus {
  outline: none;
  }

Created a Jsfiddle for the example https://jsfiddle.net/ev2pxynL/1/

Any help will be appreciated, been strugling with this basic problem for a while now. I want to create the arrow exactly as in the design.

Upvotes: 1

Views: 3283

Answers (1)

Rahul Panwar
Rahul Panwar

Reputation: 100

In your checkbox you are using content which is predefined style. just link fontawesome css and change content

 .form-label > input:checked + span::before {
     content: '\f00c';
  }

Or Just google how to make custom checkbox or checkout below link. How TO - Custom Checkbox

Upvotes: 1

Related Questions