Bitwise Bitwise - 10 days ago 6
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.

WIREFRAME



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

FORM



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

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


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.

CSS



.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

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('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg') left center no-repeat / contain;
}
input {
  padding: 10px 30px;
}
<label>
  <input type="text" placeholder="Hello">
</label>

Comments