Wyśrodkuj obraz w tle przycisku wprowadzania

Question

Może to brzmieć jak prosta poprawka, ale pozwól mi wyjaśnić szczegółowo.

Mam przycisk <input type="submit"/> i próbuję wyrównać strzałkę po prawej stronie tekstu przycisku (który jest już wyrównany do środka).

Oto skrzypce: http://jsfiddle.net/s6rrzsa4/4/

Teraz zbliża się do kwestii:

1. Nie mogę zmienić <input> do <button> tag ponieważ chodzi z CMS).
2. Tekst przycisku może być dowolny, co oznacza, że ​​nie mogę przyciąć obrazu ze strzałką z przesunięciem (równym szerokości tekstu) i użyć położenia tła: centrum.
3. Nie mogę dodać: po pseudo elementu dla elementu nadrzędnego, ponieważ to powoduje, że obszar strzałki jest niemożliwy do skasowania.
4. Jak już powiedziałem, tekst przycisku może się zmienić. Więc nie mogę użyć procentów dla tła.
5. Przycisk ma ustaloną szerokość (przepraszam, zapomniałem dodać ten punkt).

Answer 1

@feliks rozwiązanie jest dobre. Ale ma on wadę dodawania elementu rozpiętości do ciała, aby obliczyć szerokość tekstu. Możemy użyć płótna do obliczenia szerokości tekstu, ale nie będzie on dołączany do 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'); 

Answer 2

1) można użyć: po pseudo stylu pointer-events: none; ale nie jest obsługiwana w IE http://caniuse.com/#feat=pointer-events

2) umieścić > znak na końcu łańcucha

Answer 3

Dla znalezienia długość tekstu, używany manekina span i użył trochę javascript do obliczenia 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(); 

Proszę sprawdzić skrzypce - http://jsfiddle.net/afelixj/s6rrzsa4/9/

Answer 4

Brzmi jak jesteś dość ograniczone w wyborze „nice” rozwiązań.

Najłatwiej można myślę, aby to zrobić w danej sytuacji jest, aby uzyskać listę wszystkich możliwości tekstowym swoją wartość przycisk może być i kierować CSS z wartością:

div input[value="Anything"] { 
    background-position: 200px 30px; 
} 

Oto Twoja aktualizowane Fiddle: http://jsfiddle.net/s6rrzsa4/8/