Using two different style for checkbox, both on the same page

Question

I defined my "default" checkbox style on globals.css, I file that I include on every page

input[type=checkbox] {
    display:none;
}
input[type=checkbox]+label {
    width:auto;
    display:inline-block;  
    cursor:pointer;
    position:relative;
    line-height:20px;
    padding-left:22px;
}
input[type=checkbox]+label:before {
    content:"";  
    display:inline-block;  
    width:16px;  
    height:16px;  
    position:absolute;  
    left:0;  
    background-color:#F5F5F5;
    border-width:1px;
    border-style:solid;
    border-radius:3px;  
}
input[type=checkbox]:checked+label {
    outline:0;
}
input[type=checkbox]:checked+label:before {
    content:'\2713';
    font-size:16px;
    line-height:16px;
    text-align:center;  
}

Then on a page I need this type of checkbox as "default" and another checkbox (on-off switch) only in one place. The problem is that the switch take also the CSS style of the normal checkbox of globals.css. Is the only way to solve this problem apply !important to each?? (or most of) the lines of the on-off switch? Or is there a way to reset CSS to normal checkbox for this container and the apply new styles?

On-off CSS

.checkbox_onoff {
    float:left;
    width:60%;
    position: relative; width: 60px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}

.checkbox_onoff-checkbox {
    display: none;
}

.checkbox_onoff-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #666666; border-radius: 0px;
}

.checkbox_onoff-inner {
    width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}

.checkbox_onoff-inner:before, .checkbox_onoff-inner:after {
    float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.checkbox_onoff-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #6194FD; color: #FFFFFF;
}

.checkbox_onoff-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #F8F8F8; color: #666666;
    text-align: right;
}

.checkbox_onoff-switch {
    height:20px;
    width:20px; margin: 0px;
    background: #FFFFFF;
    border: 2px solid #666666; border-radius: 0px;
    position: absolute; top: 0; bottom: 0; right: 36px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}

.checkbox_onoff-checkbox:checked + .checkbox_onoff-label .checkbox_onoff-inner {
    margin-left: 0;
}

.checkbox_onoff-checkbox:checked + .checkbox_onoff-label .checkbox_onoff-switch {
    right: 0px; 
}

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

You can use !important or you can do what is done in this post

What are the implications of using "!important" in CSS?

I also found this other post very helpful: http://css-tricks.com/when-using-important-is-the-right-choice/

Make sure your global css declaration is before your second css declaration.

edited May 23 '17 at 12:11

Community

1
1

answered Feb 02 '14 at 03:32

Hunter Mitchell

7,063
18
69
116

As I wrote, the first one is my "default" checkbox style for the entire site, so if I add some cascading style this would be a big work to change all pages. On-Off switch, instead, is only used in one page and can be declared in cascating order, e.g.: `
` and then on CSS `#where_to_use_onoffswitch .checkbox_onff` to prevent that the on-off switch woulb be apply to the others checkboxes. In this case is `!important` the right way to operate?
– Perocat Feb 02 '14 at 03:39
1

@Perocat Yes. `!important` was created to do just that. But there are other ways as well. Personally, i see no issue with using `!important` if it gets the results you want. The other processes are just other ways of doing the same. – Hunter Mitchell Feb 02 '14 at 03:42

score 1 · Answer 2 · answered Feb 02 '14 at 03:47

There are a few ways to achieve what you want, !important is one of them and you can use it, no problem. It's not the best practice, but since you mention that it would be a limited use, in a controlled environment, there should be no problem.

Still, it would be much better if you can do some changes like add a class to the element you want to control in that page and modify elements with that class.

Or you can load the css and after that add a style section on the head of the document to modify the effect of the css file.

Finally, you can add a style attribute on the tag itself, although considering your code, it looks like too much for readability in a tag.

Thank you, I opted for the `!important` way, and at the end with only 5 `!important` I solved the problem, rewriting che `.checkbox_onoff` section with cascading style instead of using multiple classes. — Perocat, Feb 02 '14 at 04:11

Using two different style for checkbox, both on the same page

2 Answers2