Question: Looking for best way to implement basic authentication where user needs to enter username and password and I can control the database of users.

This is for c# and MCV application. 

Just looking for a pointer or sample for best way to implement this in MVC.

Answer: 
background is added to `label` within a div `ui-checkbox` wrapping checkbox itself.

You need to override `label`'s background with class `ui-checkbox-off`. Use `!important` to force override.

```
/* un-checked */
.ui-checkbox label.ui-checkbox-off {
  background: white !important;
}

/* checked */
.ui-checkbox label.ui-checkbox-on {
  background: #00b0eb !important;
}

```

To change the color of the checkbox itself, use `:after` pseudo selector to override `background-color` not `background`.

```
.ui-checkbox-off:after {
  background-color: white !important;
}

.ui-checkbox-on:after {
  background-color: #00b0eb !important;
}

```

> 
> **[Demo](http://jsfiddle.net/Palestinian/4AMeT/)**
> 
> 
>
```
Why can't you use custom checkbox..
<!DOCTYPE html>

<html>
  <head>        
    <style>
        .checkbox {
            display: inline-block !important;
            cursor: pointer;
            font-size: 25px !important;  
            margin: 0px !important;              
        }
        input[type=checkbox] {
            display: none;
        }
        .checkbox:before {
            content: "";
            display: inline-block;
            width: 25px;
            height: 25px;
            vertical-align: middle;
            background-color: white;
            color: black;
            text-align: center;
            box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
            border-radius: 3px;
        }
        input[type=checkbox]:checked + .checkbox:before {
            content: "\2713";
            background-color: #0088cc;
            text-shadow: 1px 1px 1px black;
            font-size: 22px;
        }
    </style>
</head>
  <body>
    <input data-role="none" id="Option" type="checkbox"/>
    <label data-role="none" class="checkbox" for="Option"> Alerts </label>     
  </body>
</html>

```