CODEWITHSUNDEEP
vue.jscheckboxsizeelement
Agnes Liszka
Agnes Liszka

Reputation: 69

How to center the tick in the el-checkbox Element library element

Can anyone advice how can I style el-checkbox Elements library (https://element.eleme.io/#/en-US/component/checkbox) element to change the checkbox height and width and to have the tick in the center of the checkbox.

I have changed the size of the text and the checkbox but now the tick is not centered.

enter image description here

enter image description here

Upvotes: 0

Views: 406

Answers (1)

tony19
tony19

Reputation: 138536

The check mark selector is .el-checkbox__inner::after, and it's positioned absolute, so you'll have to set height and left accordingly.

The following CSS can style the various parts of the checkbox:

.el-checkbox,
.el-checkbox__label {
  font-size: 22px;
}

/* checkbox */
.el-checkbox__inner {
  height: 22px;
  width: 22px;
}

/* check mark */
.el-checkbox__inner::after {
  height: 14px;
  left: 8px;
}

demo

Upvotes: 1

Related Questions