Pseudo-Elements with placeholder

HTML

<form action="">

    <label for="search">label</label>
    <input id="search" name="searchinput" type="text" placeholder="placeholder content with pseudo element">

  
  
  
</form>

CSS

label {
  display: block;
  margin: 0 0 4px;
}
input {
  border: pink;
  padding: 20px 20px 20px 10px;
  font-size: 1.2em;
  width: 100%;
}
label, input {
  font-family: 'Open Sans',Arial,sans-serif;
}

input {

  
}


/* Chrome/Opera/Safari */
::-webkit-input-placeholder:before { 
  color: lime;
	content:url(data:image/gif;base64,R0lGODlhJQAlALMAAAA8hf///xBIje/z9zBhnM/a6J+20YCewmCFs6/C2UBtpCBUlL/O4XCRuo+qylB5qyH5BAAAAAAALAAAAAAlACUAAARpEMhJq7046827/2AojmRpnmiqruy4tJYTHLAkJEFuCK1Q6LkCT0UYBAYEgMKITCGMhZeE8BsgToccYzgRMHKNkkGXGQcMIl/uqkEEuZ3sQNF5GGmgRNJDSMBrgIGCg4SFhoeIiYqLjIIRADs=);

  border:1px solid red;
  content:"☼";
  
  display:inline-block;
width:20px;
height:20px;
  margin-left:-30px;
  margin-right:20px;
  text-indent:0;
}

input:focus ::-webkit-input-placeholder:before {
  display:none;
  border-color:black;
}




/* Firefox 19+ */
::-moz-placeholder {
   color:red;
   background:pink;
   background:pink...