epitaque epitaque - 6 months ago 57
HTML Question

How do you style a text input so that there's an icon on the left without using background-image?

I'm trying to create a text input similar to the username and password input shown in Pearson's TestNav login (ignore the yellow box).

Pearson's TestNav Login

To make the icon on the left, they use the background-image property. I was wondering if it was possible to achieve the same effect without using any images. I've gotten pretty close, but there are two problems. The border to the right of the icon box is rounded, and if you click the icon it doesn't focus the input. I tried making the input box background transparent and putting the icon behind it, but Chrome overrides the background color if the site is in the password manager.

Here's the CSS/HTML of my attempt:
HTML:

<div class="field">
<input type="text">
<div class="icon">
<i class="fa fa-user"></i>
</div>
</div>


CSS:

.field input {
outline: none;
border: 0px solid #fff;
font-size: 14px;
padding: 5px 5px 5px 44px;
position: absolute;

width: 260px;
height: 40px;

box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 0px 0px rgba(186,213,232,1);

transition: border 0.5s ease-in-out 0s, box-shadow 0.3s ease-in-out 0s;
}

.field input:focus {
border: 1px solid #2977FF;
box-shadow: 0px 0px 10px 2px rgba(186,213,232,1);
}

.field .icon {
display: flex;
justify-content: center;
align-items: center;


height: 36px;
width: 36px;
padding: 0;
border: 1px solid #eee;
border-radius: 3px;
margin: 1px 0px 0px 1px;
position: absolute;
background-color: #eee;
}

Answer

Try changing your icon div to a label

<div class="field">
  <input type="text" id="this-input">
  <label class="icon" for="this-input">
    <i class="fa fa-user"></i>
  </label>
</div>

That way when it is clicked it focuses the element it references (for="this-input")

To fix the border radius. Change the icon style from

border-radius: 3px;

to

border-radius: 3px 0 0 3px;

This starts from top left corner and says 3px for the top left, then 0 for top right, 0 for bottom right, and 3px for bottom left borners