Edit search field with icon CSS

Question

Edit search field with icon CSS

Navigation

#1 by (0 votes)

1

I'm developing a web application and would like to format my search field as well. With icon inside and a written placeholder search product

Lookslikethisismysearchfield.

WiththeroundbordersandiconinsidethebuttonandthenameLookforaproductinsidebutIcannot.

HTML

<divclass="campo_busca"><input type="text"id="busca"><i class="fa fa-search"></i></div>

CSS

 .campo_busca{
  margin-top: 40px;
 margin-left: 160px;
 border: 1px radius solid;
}

 #busca{
 width: 90%;
  }

html css css3

asked by anonymous 25.01.2018 / 03:14

1 answer

Extracting array values and transforming into integers Redirect through the option value and keep it selected

score 0 · Accepted Answer

The placeholder is used to display previous text in the field:

placeholder="PROCURAR UM PRODUTO"

And you can apply styles to input and button so that they are as shown in the image. I also used cursor: pointer on the button so that the mouse icon changes by going over.

*{
   position: relative;
}

.campo_busca{
   margin-top: 40px;
   margin-left: 160px;
}

#busca{
   width: 90%;
   border: 1px solid #000;
   border-radius: 5px;
   padding: 30px 30px 30px 50px;
   text-align: center;
}

.campo_busca i{
   position: absolute;
   top: 50%;
   left: 25px;
   transform: translateY(-50%);
   cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="campo_busca">
   <input placeholder="PROCURAR UM PRODUTO" type="text" id="busca">
   <i class="fa fa-search"></i>
</div>

Also add position: relative to all page elements so you can move or position them. Include in CSS:

*{
   position: relative;
}