CODEWITHSUNDEEP
htmlcsscheckbox
Dror
Dror

Reputation: 177

Styling checkbox without a label

I tried this tutorial to create a checkbox with a different style.

This checkbox has a label. When I delete the label it (or the text in it) the checkbox doesn't shown.

How can I see the checkbox without having a text?

Upvotes: 1

Views: 4648

Answers (2)

GeckoTang
GeckoTang

Reputation: 2785

If you want to use input only, you can also use apperance property for styling checkbox. However it doesn't work on IE.

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: borer-box;
  width: 100px;
  height: 30px;
  cursor: pointer;
  background: url(//dummyimage.com/100x30/000/ffffff&text=click+me);
}
input[type="checkbox"]:checked {
  background: url(//dummyimage.com/100x30/0e7d0e/ffffff&text=checked);
}

DEMO

Upvotes: 1

Legionar
Legionar

Reputation: 7597

In the CSS you can see everywhere input[type=checkbox]:not(old):checked + label, so if you remove label, CSS will not be used. So either change your CSS, or leave label empty - <label for="XYZ"></label>.

EDIT

So just add min-width and height property:

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  height: 45px;
  min-width: 45px;
}

DEMO

Upvotes: 3

Related Questions