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;
}
This code should display a input bar with the search icon to 10px from the left and centered vertically, instead it's in the center of the bar and offset vertically. When I change:
background-position: center 10px;
to:
background-position: center left;
It does what I want it to but is missing the 10px padding to the left. Any clue as to what's going on here? I just can't get this working properly.
background-position: 10px center should do it for you.
using center and left is using keywords only, which the browser somehow is able to get right because he can tell that left is not meant as a vertical unit.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments