Center-align background-image einer Eingangstaste

Question

Das klingt vielleicht nach einer einfachen Lösung, aber lassen Sie es mich im Detail erklären.

Ich habe eine <input type="submit"/> Schaltfläche und ich versuche, den Pfeil auf der rechten Seite der Schaltfläche Text auszurichten (die bereits zentriert ausgerichtet ist).

Hier ist die Geige: http://jsfiddle.net/s6rrzsa4/4/

Nun zu den Fragen kommen:

1. Ich kann den <input> einen <button> Tag ändern, da es von einem CMS) kommt.
2. Der Schaltflächentext kann alles sein, was bedeutet, dass ich den Pfeil Bild mit einem Offset (gleich der Breite des Textes) nicht zuschneiden und background-position: center verwenden kann.
3. kann ich nicht hinzufügen: nach Pseudo-Element für das Elternteil div, da es den Pfeil Bereich unclickable macht.
4. Wie ich schon sagte der Button Text kann sich ändern. Daher kann ich keine Prozentsätze für die Hintergrundposition verwenden.
5. Die Schaltfläche hat eine feste Breite (leider vergessen, diesen Punkt hinzuzufügen).

Answer 1

@felix Lösung ist gut. Aber es hat den Nachteil, dass das Span-Element an den Körper angehängt wird, um die Breite des Textes zu berechnen. Wir können Canvas verwenden, um die Breite des Textes zu berechnen, aber es wird nicht an DOM angehängt.

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) können Sie: nach pseudo mit Stil pointer-events: none; aber es ist nicht in IE unterstützt http://caniuse.com/#feat=pointer-events

2) am Ende der Schnur > Zeichen setzen

Answer 3

Für die Textlänge zu finden, verwendet ein Dummy span und benutzte etwas Javascript, um die background-position-x zu berechnen.

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(); 

Bitte überprüfen Sie die Geige - http://jsfiddle.net/afelixj/s6rrzsa4/9/

Answer 4

Es klingt wie Sie in Ihrer Wahl von „schön“ Lösungen ziemlich begrenzt sind.

Der einfachste Weg, ich denke, kann dies in Ihrer Situation zu tun ist, eine Liste aller Text Möglichkeit Ihre Schaltfläche Wert zu erhalten und die CSS mit dem Zielwert:

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

Hier ist die aktualisierte Fiddle: http://jsfiddle.net/s6rrzsa4/8/