Center align background-image of an input button

Question

This might sound like a simple fix, but let me explain it in detail.

I've an <input type="submit"/> button and I'm trying to align the arrow to the right of the button text (which is already center aligned).

Here's the fiddle: http://jsfiddle.net/s6rrzsa4/4/

Now coming to the issues:

1. I cannot change the <input> to a <button> tag since it comes from a CMS).
2. The button text can be anything, which means I cannot crop the arrow image with an offset(equal to the width of the text) and use background-position:center.
3. I cannot add :after pseudo element for the parent div, since it makes the arrow area unclickable.
4. As I already said the button text can change. So I cannot use percentages for background-position.
5. The button has a fixed width (sorry, forgot to add this point).

Answer 1

For finding the text length, used a dummy span and used some javascript to calculate the background-position-x.

var a = $("input").outerWidth();

var s = $('<span class="dummy" />').html($("input").attr('value'));

s.appendTo('body');

var b = s.outerWidth();

var pos = b + (a-b)/2;

$("input").css({
    'background-position': pos +'px center'
});

s.remove();

Please check the fiddle - http://jsfiddle.net/afelixj/s6rrzsa4/9/

Answer 2

@felix solution is good. But it has downside of appending span element to body, in order to calculate width of the text. We can use canvas to calculate the width of the text yet it won't be append to DOM.

http://jsfiddle.net/s6rrzsa4/16/

var elem = $('input'),
    cs = window.getComputedStyle(elem[0]),
    context =  document.createElement("canvas").getContext("2d"),
    metrics, pos;

    context.font = cs.fontSize + " " + cs.fontFamily;

    metrics = context.measureText(elem[0].value.toUpperCase()), 
    pos =  (elem.width() - metrics.width)/2 + 20;

    elem.css('background-position','calc(100% - '+pos+'px) center');