2
<form class="form-inline my-2 my-lg-0 pl-3-lg">
<input class="form-control" type="search" placeholder="Pesquisar" aria-label="Search">
<button class="btn btn-dark ml-1" type="submit">
<img src="img/searchIcon.png">
</button>
</form>input, I wanted it to be a search icon inside the input, using bootstrap, how do I do this?
Example:
6
This would be an option, but you will have to do in "Save" the style, so that the search icon is in the color of the <input>:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="col-sm-3 my-1">
<div class="input-group">
<input class="form-control" type="search" placeholder="Pesquisar" aria-label="Search" style="border-right: none;">
<div class="input-group-append">
<div class="input-group-text" style="background-color: #FFF"><i class="fas fa-search"></i></div>
</div>
</div>
</div>Vlw! I forgot to ask one thing. You know when the person clicks the mouse inside the input and the border turns blue?! So, do you know how to change this color? I’ve searched the Bootstrap css and couldn’t find how to change the color.
To remove the Focus, you can use: input[type="search"]:focus{border-color: #ced4da;
 box-shadow: 0 0 0 0;
 outline: 0;}, if you want to change the color use: input[type="search"]:focus{ 
 border-color: #28a745;
 box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);}
Browser other questions tagged html css bootstrap-4
You are not signed in. Login or sign up in order to post.
Puts a
input-group-prepend. Documentation link: https://getbootstrap.com/docs/4.1/components/forms/– LeAndrade