CSS form input background-image restrictions?

1

I have this html-

<form>
  <input type="text" name="Search" placeholder="Search...">
</form>

with this css-

input[type=text] {
		    width: 1px;
		    box-sizing: border-box;
		    border: 0px solid #ccc;
		    border-radius: 25px;
		    font-size: 16px;
		    background-color: white;
		    background-image: url('searchicon.png'); // <--------
		    background-position: 10px 10px; 
		    background-repeat: no-repeat;
		    padding: 12px 20px 12px 40px;
		    -webkit-transition: width 0.3s ease-in-out;
		    transition: width 0.3s ease-in-out;
		}

		input[type=text]:focus {
		    width: 50%;
		}

I want to know what are the limits for the background-image declaration; property & value. Does it have to be a url ? What is the MAX/MIN size of the image?

> background-image: url(‘searchicon.png’);

or can I declare a value of a font?

> background-image: ‘.glyphicon-search’;

2

You want the background image to be a font??? Why would you do that, I am so confused :confounded:

Valid properties:

  • none - Is a keyword denoting the absence of images.
  • <image> - Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
  • inherit - takes previous backroung-image
1 Like
3

it’s for a transition input form -
http://www.w3schools.com/howto/howto_css_animated_search.asp
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search