Change checkbox style: change background color when checked

Im changing the look and feel of all my checkboxes using css3, but i'm trying to find a better way to implement the checked properties (when checked the checkbox have to be filled just with a solid color) and i really don't know if using padding in order to acomplish this is the best practice since im getting different results when using different browsers. Some advide will be really appreciated.

Here's the HTML:

<div class="checkbox">
     <div class="tag">Confidencial</div>    
     <input type="checkbox" class="input-assumpte" id="input-confidencial"><label for="input-confidencial"></label>
</div>

And here's the CSS:

.checkbox {
margin:0 0 1em 2em;

}

  .checkbox .tag {
    color: #595959;
    display: block;
    float: left;
    font-weight: bold;
    position: relative;
    width: 120px;
  }

  .checkbox label {
    display:inline;
  }

  .checkbox .input-assumpte {
    display:none;
  }

  .input-assumpte + label {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    display: inline-block;
    position: relative;  
  }

  .input-assumpte:checked + label:after {
    background-color: #595959;
    color: #595959;
    content: '\2714';
    font-size: 10px;
    left: 0px;
    padding:2px 8px 2px 2px;
    position: absolute;
    top: 0px;
 }

Notice that i have to include a character in the checkbox checked status in order to being able to add a padding to fill the whole checkbox with a background color, as i said before im really trying to find a better way to do that.