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

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;
}

Answer 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.

Answer 2

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.