html - CSS Checkbox duplicate -

I struggle with the styling checkbox. Can anyone tell me why the standard checkbox is still being shown with a custom box? I have had this problem before being an unwanted place in CSS but I can not see this problem at this time.

css

  / * checkbox styling * / input [type = checkbox]. CSS-Checkbox {Display: None; } Input [type = checkbox]. Css-checkbox + label.css-label {padding-left: 27px; Height: 22px; Display: inline-block; Line-height: 22px; Background repeat: do not repeat; Background-position: 0; Font-size: 22px; Vertical-align: medium; Cursor: indicator; } Input [type = checkbox]. CSS-checkbox: check + label.css-label {background-position: 0 -22px; } Label.css-label {background-image: url (http://csscheckbox.com/checkboxes/u/csscheckbox_ca0ba5f8e61aa87173232fcf5ce5eac5.png); -webkit-touch callout: none; -webkit- User Selection: None; -khtml- User Selection: None; -moz- User Selection: None; MS-User Selection: None; User Selection: None; }  

HTML

  & lt; Input class = "CSS-checkbox" style = "display: inline" type = "checkbox" id = "chair" name = "option" onClick = "showHideChair (this, 'myChair')" & gt; Label class = "css-label" for "chair" & gt; Chair & lt; / Label & gt; & Lt; Input class = "CSS-checkbox"  

This is my favorite

< P> Inline is the largest in CSS, so it increases your other CSS. Mdn per:

The following list specificity of the selectors is increasing:

• Type selectors
• class selector
• ID selector
• Inline style

/ div>