I have created the following:
https://i.sstatic.net/Eu9kh.png
And I am aiming for this:
https://i.sstatic.net/maKCM.png
Both search bars have on-click states but I am struggling to achieve this using bootstrap, CSS, JS.
Can someone guide me on how to implement this feature?
Code:
.loc-icon{
background-color: white;
border: none;
border-radius: 15px;
padding: 15px
}
.loc-input{
border: none;
padding: 15px;
border-radius: 15px;
}
.loc-submit{
background-color: white;
border: none;
border-radius: 15px;
padding-right: 1rem;
}<div class="input-group mb-3 loc-bar">
<span class="input-group-text loc-icon" id="inputGroup-sizing-default"><img src="Images/place.png" alt=""></span> <!-- location icon -->
<input type="text" class="form-control loc-input" aria-describedby="inputGroup-sizing-default" placeholder="Enter your location">
<button class="loc-submit " type="submit" name="button"><a href="/"><img src="Images/right-arrow.png" alt=""></a></button>
</div>Seeking assistance on this!!
Thank you to all the amazing people out there.