Turning a bootstrap form input into a clickable element by adding a font-awesome icon

I am facing an issue with my date input field and a font awesome icon placed on top of it. The appearance is correct, but I am unable to click on the input when the mouse is hovering over the icon. Despite trying to adjust the z-index, the problem persists.

Here is a visual representation: https://i.sstatic.net/LZ4GH.png

HTML

<div class="form-group inline-block Criteria__datePickerDiv">
    <input type="text" name="dob" id="datepicker" placeholder="Birth Date" class="Criteria__datePicker" value="{{ old($user->seekerProfile->dob->format('Y-m-d')) }}">
</div>
<span class="Criteria__calendar">
    <i class="fa fa-calendar"></i>
</span>

CSS

.Criteria__datePicker {
    border: none;
    border-bottom: 3px solid $gray-light;
    font-size: 20px;
    text-shadow: 0 0 0 $gray-light;
    color: transparent;
    font-weight: 600;
    width: 150px;
    padding-right: 5px;
    margin-left: 15px;

    &_focus {
        outline: none
    }
}
.Criteria__datePicker:hover {
    cursor: pointer;
}
.Criteria__datePicker:focus {
    outline: none;
}
.Criteria__datePickerDiv {
    z-index: 1;
}
.Criteria__calendar {
    position: relative;
    left: -15px;
    font-size: 22px;
    color: $brand_green;
    z-index: 0;
}
htmlcsstwitter-bootstrap

Answer №1

To achieve a similar look to an input group using default Bootstrap styles, you can follow this example:

HTML:

<div class="custom-input">
  <div class="input-group">
    <input class="form-control" aria-describedby="basic-addon2" type="text">
    <span class="input-group-addon" id="basic-addon2">
      <i class="glyphicon glyphicon-calendar"></i>
    </span>
  </div>
</div>

CSS:

.custom-input
{
  margin: 1em;
  width: 200px;
}

.custom-input .input-group input
{
  border-right: none;
}

.custom-input .input-group .input-group-addon
{
  background: #fff;
  border-left: none;
}

If you want a borderless design, you can make additional adjustments to get a closer result here:

.custom-input
{
  margin: 1em;
  width: 200px;
}

.custom-input .input-group
{
  border: none;
}

.custom-input .input-group input
{
  border-right: none;
  border: none;
  border-bottom: solid 1px #d5d5d5;
  box-shadow: none;
  border-radius: 0;
}

.custom-input .input-group .input-group-addon
{
  background: #fff;
  border: none;
  border-bottom: solid 1px #d5d5d5;
  border-radius: 0;
}

The use of the .custom-input class is optional and serves as a container for the input group.

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

Tips for verifying the compatibility of elements as parent or child components

Is it possible in JavaScript to verify if an HTML element can be a child of another element? For instance: Can an unordered list (<ul>) contain a list item (<li>) as a valid child element? - Yes Can an unordered list (<ul>) contain ano ...

javascripthtmlchildren

Counting Numbers with jQuery Animation from Zero to Percentage Value

I am currently working on a project where I aim to incorporate a jQuery Animated Number Counter, starting from zero and ending at a specified percentage value. The values of the counter are dynamically retrieved from a database. function timer() { if ...

jqueryhtmltimercounteranimator

What steps should I take in modifying my existing code to use jQuery to set my div to a minimum height rather than a fixed height?

Could someone assist me in adjusting my div to have a min-height instead of a regular height? Whenever I click on the "Learn more" button, it extends past my div because the function is designed to set a specific height rather than an equal height. $.fn.e ...

javascriptjqueryhtmlcss

Using the DRY principle in JavaScript to handle dynamic fields

Recently delving into Javascript, I encountered a dynamic field script that allows for adding and subtracting fields with the click of a button. The functionality is effective and serves its purpose well. $(document).ready(function() { var max_fields ...

javascriptjqueryhtml

`The function `setTimeout` throws an error when passed as a string.`

Here are two pieces of code that may look identical, but one works properly: function hideElement(obj) {setTimeout(function() {obj.style.display = "none";}, 20);} On the other hand, the second one results in error: obj is not defined: function hideEleme ...

javascripthtmlcss

Is there a way to identify all the elements that have properties like border and border-radius applied to them?

When looking for elements with certain properties, you can use queries like this; $$('*[title]') For example, if you want to find elements with a border or border-radius applied, standard queries may not work. $$('*[border-width]') // ...

csscss-selectors

What is the process for storing form data into a text file?

Despite seeing similar questions in the past, I am determined to get to the bottom of why this code isn't functioning as expected. My goal is to input form data into a .txt file using a post request. While I lack extensive knowledge of PHP, I am pieci ...

javascriptphphtmlforms

"Autocomplete disable" feature malfunctioning on the final input field of all web pages

I'm dealing with a web application that has a login page. The username and password fields have the autocomplete attribute set to "off," as well as other variations like nope, new-password etc. However, it's still not working in Chrome version 62 ...

javascriptjqueryhtml

Update the Array by replacing the information corresponding to the specific Id

I am working with an array that looks like this : mainArray = [ {name : "Eminem", id : 2}, {name : "Rakim" , id : 3 }, {name : "Kuniva", id : 4 } ] Let's say I decide to update the name "Kuniva" to "Proof" and send this change to the database. The ...

javascripthtmlarraysangulartypescript

Uncertainty surrounds the interaction of computed height and margins with CSS float right

What is the reason behind this HTML code: <html> <head> <style type="text/css"> .left { background-color: yellow; } .right { float: right; background-color: lightgray; width: 150px; } </sty ...

csshtml

Interactive Video Effect

Seeking to create a unique video hover effect on an image where, when the mouse hovers over it, a video pops up similar to examples found on this website. I have been grappling with finding a solution for this issue over the past few months. Does anyone ...

jqueryhtmlcss

What is the best method for retaining just a specific portion of HTML code within Webbrowser VB.Net?

As a web developer accustomed to working with websites, I am now faced with the task of creating a Windows-based program using VB.net. In this project, I have two domains - A and B, where B is embedded within A using an iframe element. The code snippet for ...

htmlvb.netiframewebbrowser-control

The HTML.php form displays boolean radio button values as 'on'

My html.php page includes three buttons: "Clear Page," "Retrieve," and "Update Details." Upon opening the form, users can input either a value for id="siteId" or id="siteName". By clicking the "Retrieve" button, the remaining details of a stored site are ...

phphtmlradio-button

Python: parsing comments in a cascading style sheet document

I am currently working on extracting the first comment block from a CSS file. Specifically, I am looking for comments that follow this pattern: /* author : name uri : link etc */ and I want to exclude any other comments present in the file, such as: /* ...

pythoncssregexcommentstext-processing

Replace automatically generated CSS with custom styles

When using a Jquery wysiwyg editor, I have encountered an issue where it automatically adds code to the textarea at runtime. The problem arises from it inserting an inline style of style="width:320px" when I need it to be 100% width due to styles already ...

javascriptjqueryhtml

Adjust the background color of the dropdown when toggled

I want to add a background color to my dropdown menu when it's activated. In the demo, the dropdown content overlaps with the text behind it. Currently, I have a scrollspy feature that applies a background color to the nav bar and dropdown menu when s ...

javascripthtmlcssbootstrap-5nav

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

I am currently working with Ionic v1 and AngularJS, utilizing ion tabs: <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Home Tab --> <ion-tab icon-off="ion-home" icon-on="ion-home" href="#/tab/home"> <ion-nav ...

javascriptiosangularjshtmlionic-v1

Styling a jQuery Chosen Select Box: Tips and Tricks

I am currently utilizing jQuery chosen plugin for my multi-select box. However, I am facing some challenges with customizing the styles defined in the chosen.css file as they are proving to be quite stubborn to override. Removing the entire chosen.css file ...

jquerycssjquery-chosen

Managing several instances of NgbPagination on a single webpage

I am facing a challenge with having multiple NgbPagination components on a single page. For more information, please visit: Initially, I attempted to use ids but encountered an issue where changing one value in the first pagination affected both tables. ...

htmlcssangularpaginationng-bootstrap

How can I position my navbar above my background image using Bootstrap?

I am a newcomer to using bootstrap and I am attempting to create the following design: https://i.sstatic.net/EV9A1.png In the design, the navbar is situated on top of the background image. However, with my current setup, this is what I have: <!DOCTYPE ...

htmlcsstwitter-bootstrapbootstrap-4