0

I'd just like to change the background color and remove the border so that I have a white square.

There's a working hack (except on IE) where you can hide the input and put a span element in its place that works just as well, except it hides the checkmark (the :checked status) and it requires you to use your own image.

From another StackOverflow answer:

.myCheckbox input {
    display: none;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
    }

.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>

I'd like to use the default checkmark.

pnuts
  • 58,317
  • 11
  • 87
  • 139
JackHasaKeyboard
  • 1,599
  • 1
  • 16
  • 29

1 Answers1

0

You can't style checkboxes. This is always accomplished via one hack or another. This is really a dup of this question. There are ample resources available there, I won't attempt to repeat them.

Community
  • 1
  • 1
ChiralMichael
  • 1,214
  • 9
  • 20
  • This post isn't a dupe. He's asking how to nebulously style a checkbox while I'm asking how to style a checkbox without touching the checkmark. The problem being that hiding the checkbox also hides the checkmark and you're required to provide your own, I don't want to do that. – JackHasaKeyboard Sep 24 '15 at 03:51
  • The answer is, you can't. – ChiralMichael Sep 24 '15 at 16:49
  • I really can't think of anything appropriate. One hack that comes to mind is to lay a transparent div over the ckeckbox with a non-tranparent border-but there is no way this is appropriate because there is no standard among browsers in how to render an input item (checkboxes included). They can be different sizes, have borders (or not), box shadows (or not), highlighting (or not), different background colors. I think it would be a disaster. Why is important to show the actual checkmark? – ChiralMichael Sep 27 '15 at 18:25
  • I guess it's not absolutely essential, the default checkbox styling just really worked for what I was trying to accomplish. No big deal. – JackHasaKeyboard Sep 27 '15 at 18:29
  • [Font-awesome](https://fortawesome.github.io/Font-Awesome/icons/) has some nice checkmarks (and checkboxes). – ChiralMichael Sep 27 '15 at 18:45