Arka Plan konumu SVG arama simgesi (olası hata?)

Question

input { 
    border-radius: 5px; 
    border: none; 
    font: normal 13px "Trebuchet MS"; 
    padding: 0 0 0 30px; 
    width: 220px; 
    height: 30px; 
    margin: 0 auto; 
    display: block; 
    background-color: #ccc; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.313 250.313" width="512" height="512" enable-background="new 0 0 250.313 250.313"><path d="M244.186 214.604l-54.379-54.378c-.289-.289-.628-.491-.93-.76 10.7-16.231 16.945-35.66 16.945-56.554 0-56.837-46.075-102.912-102.911-102.912s-102.911 46.075-102.911 102.911c0 56.835 46.074 102.911 102.91 102.911 20.895 0 40.323-6.245 56.554-16.945.269.301.47.64.759.929l54.38 54.38c8.169 8.168 21.413 8.168 29.583 0 8.168-8.169 8.168-21.413 0-29.582zm-141.275-44.458c-37.134 0-67.236-30.102-67.236-67.235 0-37.134 30.103-67.236 67.236-67.236 37.132 0 67.235 30.103 67.235 67.236s-30.103 67.235-67.235 67.235z" fill="#475250" fill-rule="evenodd" clip-rule="evenodd"/></svg>'); 
    background-size: 19px; 
    background-position: center 10px; 
    background-repeat: no-repeat; 
} 

arama simgesi olan bir giriş çubuğu soldan 10px ve dikey olarak merkezlenmiş, bunun yerine çubuğun merkezinden olduğunu ve dikey olarak dengelemek için göstermek gerekir Bu kod . Ben değiştirdiğinizde:

background-position: center 10px; 

için:

Ben o kadar istediğimizi yapar ama sola 10px dolgu eksik

background-position: center left; 

. Burada neler olduğuna dair bir ipucu var mı? Bu işi düzgün yapamıyorum.

Answer 1

background-position: 10px center sizin için yapmalıdır. Merkezi ve solun kullanıldığı

, yalnızca bir sol tarayıcı anahtar kelimesi anlamına gelmez, çünkü tarayıcı bir şekilde doğru alabilen anahtar kelimeleri kullanır.