.input-clear-wrap {
    position: relative;
    display: inline;
}

.input-clear-wrap input[type=text] {
    padding-right: 32px !important;
}

.input-clear-wrap div {
    width: 24px;
    /* background: url(../img/delete.png) no-repeat right center; */
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKdJREFUSIntkykWAjEQBX9hmVjugEJxFPYzYdgEB0Cy3YF7IaDfi4DQmQkYpnxX5XUSqeUv6QFLSWTMBGAvqeMdGAErZyQAV0mDjAO5I7XlxjgRaSxPRQJwKSGPI+tnpCotNybADjh/Qy491nIDDsp7wm65XegU2JaMvNp5sUiV2PmsaaQCTm/kcWRTJ+KRG/PcSBc4OuXGIvonnwOS+hlyY+gNtPyWO8VVGZjwzDi0AAAAAElFTkSuQmCC) no-repeat right center;
    opacity: 0.6;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -webkit-transition-delay: 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}

.input-clear-wrap div:hover {
    opacity: 1;
}