CSS inline image icon at right

css inline image at right

https://jsfiddle.net/LfgnLz91/

<div class="wrapper wrapper-icon-right icon-check-right">
<input type="text" >
</div>


.wrapper {
    width: 100%;
    box-sizing: border-box;
    padding-right: 50px;
    height: 50px;
    position: relative;
    background-color: red;
}

.wrapper:after {
    content: ' ';
    height: 100%;
    width: 50px;
    display: block;
    position: absolute;
    right:0;
    top: 0;
    
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center center;
    
    background-color: blue;
}

.icon-check-right:after {
    background-image: url('http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png');
}

.wrapper input {
    width: 100%;
}