Правый выровненный курсив Текст в текстовом поле отключен

У меня есть несколько текстовых полей, которые доступны только для чтения. Я сделал этот текст курсивом, но для числовых полей, где я также правильно выровнял текст, последний номер обрезается. Добавление дополнения только увеличивает размер текстового поля, но не устраняет проблему, как вы можете видеть на изображении (общая стоимость имеет около 20px padding, а стоимость - только 5px). Как я могу исправить это иначе, чем просто избавиться от курсивного текста? Я искал и не нашел ничего, что обращалось к этому, поэтому, если у вас есть ссылка где-нибудь, я был бы счастлив проверить это.

Это не зависит от браузера, поэтому это происходит по всем направлениям, Chrome - тот, который используется для изображения выше и имеет наиболее заметные изменения. Когда страница сначала загружается, она отображается правильно, ничего не отключается. Это часть формы, поэтому, как только вы выбрали другой вариант из раскрывающегося списка, текст внутри этих изменений только для чтения изменится, когда возникает проблема. Почти как если бы он менял стиль, когда был выбран новый вариант. Я не заметил никаких изменений стиля, изменений классов и ничего в коде. Может быть, что-то забыть, но пока ничего не вышло.

Вот jsFiddle: jsfiddle.net/mK6JK

Это не полностью оформлено так же, как проблема, но добавлены основные классы стилей. Проблема в том, что на скрипке он выглядит отлично. Но все еще проблема в моей версии.

Ответы

<input type="text" class="italic" value="1236" />

.italic{
    font-style:italic;
    padding: 10px;
    text-align: right;
}

<imput type="text" class="classnum" />

.classnum {
    text-align: right;
    font-style: italic;
    padding-right: 3px;
}