Insert icon in input text with HTML and CSS

Asked

Viewed 3,159 times

0

Hello I would like to insert an icon in the input text of my system, I even managed to put the icon, but when I click on the input to enter the text the icon simply does not hide. can help me?

código fonte

O lance era oculta o icone buscar quando clico no input.

html css front-end webdesign

  • Try using something like: <i class="icon ion-search placeholder-icon"></i>

2 answers

3


When you focus on your text field:

you use the pseudo class :focus to remove the background-image of your input

Declare in your css:

input[type='text']:focus { 
    background-image: none; 
}
  • 1

    Thank you, it worked out buddy.

  • 1

    Good! settled down .. mark as response. Hug!

  • 1

    I don’t know how you do it is the first time I’m wearing it. rs

0

Something like:

<i class="icon ion-search placeholder-icon"></i>
<input type="text" size="100" ng-model="q" placeholder="Procurar" onclose="fechaTeclado();" />

Where the <i> you place the icon you want.

  • 1

    Thanks a friend for the help.

  • 1

    Thanks a friend for the help.

Browser other questions tagged html css front-end webdesign

You are not signed in. Login or sign up in order to post.