How to put an image in <input type="text"> :

 <input type="text" placeholder="Full Name">
  • 2
    background-image - put yourself in the input, push the image, googalien1125 - strangeqargo
  • And then how to move the placeholder a little to the right? - goodalien
  • padding to help you, probably? See some textbook. look at csszengarden.com - strangeqargo
  • Can I have your code example - stackanon
  • <input class = "banner_input" type = "text" placeholder = "Full Name"> .banner_input {margin: 0 0 0 5px; padding: 16px; background: #fff; outline: none; border: none; border-radius: 3px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } input [type = "text"] {padding-left: 45px; background-image: url ("images / icon.png"); background-repeat: no-repeat; } - goodalien

2 answers 2

Try this background: #fff (цвет фона) url("http://icofx.ro/tutorials2/img/top.png") 15px 15px (положение относительно левого верхнего угла) no-repeat;

 .banner_input { background: #fff url("http://icofx.ro/tutorials2/img/top.png") 15px 15px no-repeat; border: none; border-radius: 3px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0 0 0 5px; padding: 16px 45px; outline: none; } 
 <input class="banner_input" type="text" placeholder="Full Name">

    More as an option

     *{ padding: 0; margin: 0; box-sizing: border-box; } .b-input{ display: inline-block; margin: 0 0 0 5px; position: relative; } .b-input:before{ content: '\f0aa'; position: absolute; top: 50%; left: 15px; font-family:'FontAwesome'; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; } .banner_input { border: 1px solid #ccc; background: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 16px 45px; outline: none; border-radius: 3px; } .banner_input:focus{ border-color: #111; } 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="b-input"> <input class="banner_input" type="text" placeholder="Full Name"> </div>