HTML/CSS - 背景画像（アイコン）をアイコンの右側に表示するにはどうすればよいですか？

Question

以下のCSSは、無効な入力にアイコンがある入力テキストボックスをスタイリングするためのものです。

アイコンが表示されたときに、アイコンのすぐ右にパディング/余白が表示されるようにするにはどうすればよいですか？

今、アイコンがテキスト入力の右端に接触しています。

これを行うには、どのような変更が必要ですか？

.error{ 
    outline: solid 1px red !important; 
    background: url('./resources/icons/icon_warning@2x.png') no-repeat scroll right !important; 
    background-attachment: fixed; 
    order-right: 10px solid transparent !important; 
    position: relative; 
    background-color: #eeeeee !important; 
    background-size: 15px 15px !important; 
    padding-left: 20px !important; 
    padding-right: 18px !important; 
    border-radius: 0px; 
    transition: border-color 0s ease-in-out 0s, box-shadow 0s ease-in-out 0s; 
} 

Answer 1

バックグラウンドの添付ファイルを削除する必要があります。固定し、バックグラウンドのようなものに変更してください：右の10pxの中央;