Embed the image within the form input

I am trying to incorporate an SVG image into a bootstrap form input, similar to this example:

https://i.sstatic.net/7ZSRH.png

This is the HTML code:

<div class="col-md-6">
  <div class="subscribe-wrapper subscribe2-wrapper mb-15">
    <div class="input-group">
      <img src="../../../assets/images/Combined Shape.svg" alt="">
      <input type="email" class="form-control email-input" placeholder="Enter your email">

      <span class="input-group-btn">
       <button class="btn subscribe-btn type="submit">Subscribe</button>
      </span>
   </div>
 </div>
</div>

Sass

.email-input
  height: 50px
  border-radius: 4px 0 0 4px
::placeholder
  color: $primary-gray

.subscribe-btn 
  min-height: 50px
  border-radius:0 4px 4px 0
  background: $base-red
  color: #fff
  font-weight:600

After implementation, it resulted in this:

https://i.sstatic.net/HYzYz.png

Now I am considering creating an additional white div next to the input, or is there a better way to accomplish this using Sass?

htmlcsstwitter-bootstrapsassbootstrap-4

Answer №1

I discovered a solution by applying a relative position to the input element and an absolute position to the image. By adjusting the top and left percentages, the layout improved.

.newsletter-icon
  position: absolute;
  top: 30%;
  left: 3%;
  z-index: 2;

.newsletter-form
  position: relative;

Answer №2

If you're looking to incorporate an icon into your input field, there are a few ways to approach it:

One method is to keep the image in place and use absolute positioning for the icon while ensuring the input container is set to relative. Here's an example code snippet with some adjustments for SASS:

.input-group{
    position:relative;

    img{
       position:absolute;
       left:15px; 
       top:calc(50% - 15px); 
    }

    input{
        padding-left:50px; 
    }
}

However, the downside of this approach is its lack of scalability. For a more flexible solution, consider structuring your HTML and SASS as follows:

HTML

<div class="input-group has_icon icon_email">
    <input type="email" class="form-control email-input" placeholder="Your email">
    <span class="input-group-btn">
         <button class="btn subscribe-btn type="submit">Subscribe</button>
    </span>
</div>

SASS

.input-group{

    &.has_icon{
        position:relative;

        input[type=email]{
            padding-left:50px; 
        }
        &.icon_email:before{
            content:"";
            background-image:url(../../../assets/images/Combined Shape.svg);
            pointer-events: none; 
            position:absolute;
            left:15px;
            top:calc(50% - 15px); 
        }
    }
}

By structuring your code in this way, you ensure that the icon styling won't interfere with other input groups in your project. This approach allows for easy customization and reusability by applying specific classes to designate the presence of an icon within the input field.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumb ...

javascripthtmlcssbootstrap-4

Retrieving the Href attribute from a designated div class with JQuery

I'm currently developing a Google Chrome extension where I need to extract the source code of a webpage using a jQuery get function. Here is how I implemented it: $.get(link,function(data){ // The entire source code of the link will be stored in the ...

jqueryhtml

What is the best way to center align my horizontal subnav?

I am currently working on a horizontal navbar with horizontal submenus. One issue I am facing is getting the elements in mysubnav to align centrally instead of being pushed to the left all the time. If you need a visual representation of what I mean, plea ...

javascriptjqueryhtmlcssnavigation

The textboxes are not displaying the floating numbers correctly

My issue involves 3 textareas with numbers displayed next to them. While I previously used a CSS table layout, it became inefficient when adding content between each row. I am puzzled as to why the second number, "2)", appears positioned next to the first ...

htmlcss

Conceal the URL and any parameters upon successful completion of AJAX request

In my ajax js code, the solonreport.jsp file returns a URL link that connects to a local report server and generates an Excel report. However, when using this link with the window.open(json.url) function, the link and parameters are visible to the user. ...

javascriptjqueryhtmlajax

What method does nosotroshq.com use to achieve the navigation effect when hovering over a menu item?

Seeking advice from skilled individuals familiar with JQUERY: Can anyone explain the technique used by nosotroshq.com in their top navigation bar? Specifically, how do they create the slow animation when hovering over "ABOUT US"? Any insights would be ap ...

jquerycssjquery-plugins

Determine which rows have the checkbox enabled and showcase them in a separate table using Angular

I currently have two tables, namely Table1 and Table2. The data in Table1 is fetched from a service and contains columns like Qty, Price, and Checkbox. The Checkbox column consists of checkboxes as values, while Qty and Price columns contain numeric values ...

javascripthtmljqueryangulartypescript

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

javascripthtmlcss

What is the best way to create a shape using CSS?

In my chat application, I have a functionality where replies on a chat are initially hidden and represented by a count in a red box. When the user clicks on the red button, the replies from other users are revealed along with an input box for writing a r ...

htmlcss

Floating and scrolling navigation bar not functioning properly in bootstrap framework

I've been dabbling in coding for a while now, practicing at my current job. I managed to create a floating and scrolling navigation bar on the right side of my website using bootstrap. However, after taking a 3-week break and returning to my site, I n ...

jqueryhtmlcss

By simply clicking a button in a React component, I aim to alter the font style of the text

function makeTextBold() { const boldText = document.querySelector('.form-control'); boldText.style.fontWeight = 'bold'; setText(boldText); } When I click the button, it redirects me to a blank page in the browser. ...

javascriptcssreactjs

Guidelines for refreshing owl carousel on ng-click using AngularJS

I am encountering a significant issue with the use of an owl carousel in angular.js. It functions properly the first time, but when I have buttons on the same page and need to rebuild the owl carousel upon clicking a particular button with new data, that&a ...

htmlangularjsowl-carousel

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

phpcsswordpresswoocommerce

Full replacement of a cell within an HTML table

I have a scenario like the following: <table id="myTable"> <tr> <td class="1">cell 1</td> <td class="2">cell 2</td> </tr> <tr> <td class="3">cell 3</td> &l ...

javascripthtml

Generate unique identifiers and connect them together

Utilizing a bootstrap component called collapse, I am attempting to create a unique ID and link it dynamically using ngFor. <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-c ...

angularbootstrap-4

Save a specific collection of divs from a webpage as a PDF or Word document

Could the following scenario be achievable? Imagine a webpage containing a series of div elements with unique IDs or classes. Inside each div, there is a title (possibly an h1 tag) and some additional content. Is it possible to create a selection list of t ...

javascriptjqueryhtmlms-wordpdf-generation

Optimal guidelines for logging in

After successfully creating a website using HTML, CSS, and JavaScript, I am now looking to implement a login feature to provide privacy for certain users. I have noticed that some developers use PHP, while others use JS or Node.js for this purpose. However ...

javascripthtmlnode.jsauthentication

Tips for binding data to numerous dynamic controls

Implementing reactive forms in my Angular project allowed me to create a simple form for adding employee work hours and breaks. The challenge I encountered was the inability to bind data from break controls. In the .ts file export class AddAppointmentForm ...

htmlcssangulartypescriptangular-reactive-forms

The jQuery click function triggers immediately upon the loading of the page

Despite my best efforts to resolve this issue independently and conduct extensive research on Google, I am still unable to identify the root of the problem. It seems that the click function continues to activate upon page load. Kindly elucidate the under ...

javascriptjqueryhtmlcss

Create a personalized attribute for division automation

Is it possible to automatically divide a dynamically populated ListView in jQuery-mobile into two groups based on the attribute values (Downloaded/Not downloaded)? Some listitems have the attribute status="true" while others have status="false". Here is t ...

javascriptjqueryhtmlcordovajquery-mobile