HTML/CSS Custom checkbox Button Image Issue

Question

I have been trying to get Custom checkboxes to work with my site. However, I've run into a puzzling issue with a specific part of my HTML.

Here is my current code: HTML

<div class="quicklinks_login">
    <label for="cookieuser" style="padding-left: 7px;"><input type='checkbox' name='cookieuser' value='1' tabindex='10' id='cb_cookieuser_navbar' accesskey='c' />&nbsp;Remember Me</label>
</div>

CSS

input[type="checkbox"] + label,
label > input[type="checkbox"] {
    background: url("../images/override/state_off.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
}

Now, as you can see from my CSS, I have two patterns that I want to be styled. The label > input[type="checkbox"] 'pattern' should be applied to my HTML (which it is, according to FireBug). However, the custom image does not display with the checkbox.

To sum it up, my question is simple: Why is the 'pattern' label > input[type="checkbox"] not working for my HTML?

user2625787 · Accepted Answer · 2013-08-06 00:25:19Z

1

You can customize checkboxes and radio buttons with just CSS if you prefer. https://www.google.com/search?q=css%20only%20custom%20checkbox . The basic idea is to style the label and hide the actual checkbox. Clicking on the label sets/unsets the checkbox, so all the form functionality is retained. The only downside is that old versions of IE require a graceful fallback, which most of the solutions provide.

answered Aug 6, 2013 at 0:25

user2625787

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:20:23Z

1

This is one of those elements what browsers tend not to let you style that much, and mostly people replace it with javascript.

answere on SO by @levente-nagy

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Aug 6, 2013 at 0:13

kwarunek

12.7k4 gold badges47 silver badges49 bronze badges

Collectives™ on Stack Overflow

HTML/CSS Custom checkbox Button Image Issue

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related