combobox select

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<input type="checkbox" />

CSS

input[type="checkbox"]{
    -webkit-appearance: initial;
    appearance: initial;
    width: 40px;
    height: 40px;
    border: none;
    position: relative;
}
input[type="checkbox"]:checked {
    
}
input[type="checkbox"]:checked:after {
    /* Heres your symbol replacement - this is a tick in Unicode. */
    content: "bl";
    color: #000;
    /* The following positions my tick in the center, 
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /*
     * If you want to fully change the check appearance, use the following:
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
}

JavaScript

var data = [
    { text: "Item 1", value:"1" },
    { text: "Item 2", value:"2" },
    { text: "Item 3", value:"3" }
];

$("#input").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    select: onSelect
});

function onSelect(e) {
    var index = e.item.index();
    var model = this.dataItem(index);
    $("#text").html(model.text);
    $("#value").html(model.value);
}