Căn giữa hình ảnh nền của nút đầu vào

Question

Điều này có vẻ giống như một bản sửa lỗi đơn giản, nhưng hãy để tôi giải thích chi tiết.

Tôi có nút <input type="submit"/> và tôi đang cố căn chỉnh mũi tên ở bên phải văn bản nút (đã được canh giữa).

Đây là fiddle: http://jsfiddle.net/s6rrzsa4/4/

Bây giờ đến vấn đề:

1. tôi không thể thay đổi <input> để một thẻ <button> vì nó xuất phát từ một CMS).
2. Văn bản nút có thể là bất kỳ thứ gì, có nghĩa là tôi không thể cắt mũi tên hình ảnh có độ lệch (bằng với chiều rộng của văn bản) và sử dụng background-position: center.
3. Tôi không thể thêm: sau phần tử giả cho div mẹ, vì nó làm cho khu vực mũi tên không thể nhấp được.
4. Như tôi đã nói, văn bản nút có thể thay đổi. Vì vậy, tôi không thể sử dụng tỷ lệ phần trăm cho vị trí nền.
5. Nút có chiều rộng cố định (xin lỗi, quên thêm điểm này).

Answer 1

giải pháp @felix là tốt. Nhưng nó có nhược điểm của việc thêm phần tử span vào phần thân, để tính chiều rộng của văn bản. Chúng tôi có thể sử dụng canvas để tính chiều rộng của văn bản nhưng nó sẽ không được thêm vào 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) bạn có thể sử dụng: sau khi giả với phong cách pointer-events: none; nhưng nó không được hỗ trợ trong IE http://caniuse.com/#feat=pointer-events

2) đặt > dấu ở phần cuối của chuỗi

Answer 3

Đối tìm độ dài văn bản, được sử dụng một dummy span và sử dụng một số javascript để tính toán 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(); 

Vui lòng kiểm tra fiddle - http://jsfiddle.net/afelixj/s6rrzsa4/9/

Answer 4

Có vẻ như bạn đang khá hạn chế trong sự lựa chọn của bạn các giải pháp "tốt đẹp".

Cách đơn giản nhất tôi có thể nghĩ để làm điều này trong tình huống của bạn là để có được một danh sách của tất cả các khả năng văn bản giá trị nút của bạn có thể và nhắm mục tiêu CSS với giá trị:

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

Dưới đây là cập nhật Fiddle của bạn: http://jsfiddle.net/s6rrzsa4/8/