Bitwise Bitwise - 8 months ago 68
CSS Question

Adding an SVG within an input.

I need to place icons within the inputs for creating a new user. It's probably a really easy task for someone who knows their way around front end code. However I don't. Here is the wireframe and then I show my code.


enter image description here

As you can see. There are icons on the left side of the inputs. Right now I have the SVG's in my directory and ready to go I just need to know how to place them within the input. Here is the code for the form


<label clas="name-label">
<%= f.text_field :name, placeholder: "Name", class: "form-labels" %>

<label class="email-label">
<%= f.text_field :email, placeholder: "Email", class: "form-labels" %>

So I have the placeholder with a string which currently just printing that string. I need to put the icons within that I think? Here is the css I have for the icons.


.icon-email {
background-image: image-url('email-field.svg');

.icon-name {
background-image: image-url('name-field.svg');

Is there a way I can place these classes within the place holder?

Answer Source

You can add a pseudo element in the <label> tag, and use some position and padding tricks for the visual. Using a svg for background is just the same as using an image.

label {
  position: relative;
label:before {
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  content: '';
  width: 20px;
  background: url('') left center no-repeat / contain;
input {
  padding: 10px 30px;
  <input type="text" placeholder="Hello">