input.zbz-input-clearable {
    /* ставим инпуту фоновую картинку, но отображаем ее за пределами инпута - 150% в background-position */
    background-image: url('/assets/plugins/AddXbutton/x.png'), linear-gradient(#F7F7F7,#fff 50%,#fff);
    background-position: 150% 50%;
    background-repeat: no-repeat, no-repeat;

    /* добавляем справа небольшой padding, чтоб текст не залазил поверх крестика 
    padding-right: 27px
    */
}
input.zbz-input-clearable__x {
    /* когда нужно отобразить крестик, перемещаем в правый конец инпута */
    background-position: left 50%;
}
input.zbz-input-clearable__x-over {
    /* и подготовим стиль для ховера по крестику */
    background-image: url('/assets/plugins/AddXbutton/x-hover.png'), linear-gradient(#F7F7F7,#fff 50%,#fff);
    cursor: pointer;
}
input.zbz-input-clearable::-ms-clear {
    /* убираем родной крестик очистки в IE */
    display: none;
}