Issue with Html CSS search bar: the icon is unresponsive when clicked

I've encountered an issue with a website template that includes a search form with an icon in the text field. https://i.sstatic.net/F0gLs.png

When users enter a value and press 'Enter', the form functions as expected. However, clicking on the search icon does nothing.

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

The icon is generated through the fontawesome library and integrated via CSS

content: '\f002';

Please refer to this code snippet: https://jsfiddle.net/BamBamm/df2gzkbb/10/

Is there a solution to address this issue? Thank you for your assistance.

#search form {
text-decoration: none;
position: relative;
}

#search form:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}

#search form:before {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
color: #7f888f;
content: '\f002';
cursor: default;
display: block;
font-size: 1.5em;
height: 2em;
line-height: 2em;
opacity: 0.325;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 2em;
}
    
input[type="text"] {
    height: 2.75em;
}

input[type="text"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: #ffffff;
    border-radius: 0.375em;
    border: none;
    border: solid 1px rgba(210, 215, 217, 0.75);
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;
}

body, input, select, textarea {
    color: #7f888f;
    font-family: "Open Sans", sans-serif;
    font-size: 13pt;
    font-weight: 400;
    line-height: 1.65;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="search" class="alt">
 <form action="javascript:alert('Inner Function performed!');">
  <input type="text" name="search_query" value="defaultValue"/>
  </form>
</div>

htmlcssfont-awesome

Answer №1

Transform your submit button with an icon

Make sure to review the following code snippet:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<div class="container">
<div class="col-md-3">
  <form class="navbar-form" role="search" action="javascript:alert('Inner Function performed!');">
    <div class="input-group add-on">
      <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
  
</div>
</div>

Answer №2

It is suggested to opt for a submit button with the same icon instead of placing the icon on a pseudo element in the form:

Visit this link for reference

While technically functional, altering the behavior by allowing form submission via clicking on the icon might lead to unexpected user experience and should be avoided:

#search form {
  text-decoration: none;
  position: relative;
}

#search form button {
  font-size: 0;
  position: absolute;
  right: 0;
  top: 8px;
  background-color: transparent;
  border: 0;
  appearance: none;
}

#search form button:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
  color: #7f888f;
  content: '\f002';
  cursor: default;
  display: block;
  font-size: 1.5rem;
  height: 2rem;
  line-height: 2rem;
  opacity: 0.325;
  text-align: center;
  width: 2rem;
}

input[type="text"] {
  height: 2.75em;
}

input[type="text"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: #ffffff;
  border-radius: 0.375em;
  border: none;
  border: solid 1px rgba(210, 215, 217, 0.75);
  color: inherit;
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%;
}

body,
input,
select,
textarea {
  color: #7f888f;
  font-family: "Open Sans", sans-serif;
  font-size: 13pt;
  font-weight: 400;
  line-height: 1.65;
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css " />
<div id="search" class="alt">
  <form action="javascript:alert('Inner Function performed!');">
    <input type="text" name="search_query" value="defaultValue" />
    <button type="submit">Search</button>
  </form>
</div>

Answer №3

Create a new span element in the HTML DOM and attach an event listener to it :

$('#glyphicon').click(function(){
  $('#myform').submit()
})
#glyphicon {
    position: relative;
    left: -25px;
    top: 6px;
    background-image: url(http://wfarm4.dataknet.com/static/resources/icons/set110/37275f5a.png);
    background-size : 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search" class="alt">
 <form id="myform" action="javascript:alert('Inner Function performed!');">
  <input type="text" name="search_query" value="defaultValue"/>
    <span id="glyphicon">
  
    </span>
  </form>
</div>

Answer №4

Create an event listener for when the search button is clicked. Here is a sample code snippet:

<div onclick="myFunction()">
       <i class="fa fa-minus-circle"></i>
</div>

The form will automatically submit if the user hits the Enter key. However, you need to specifically define an event for mouse click actions.

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

Show blob file as a PDF document in a popup or dialog box using HTML and TypeScript

I am currently working on integrating TypeScript and HTML to showcase the result of a webservice call as a PDF in a popup/dialog within the same page. While I can successfully open the PDF in a new tab using the window.open(url) method, I'm encounter ...

javascripthtmltypescriptpdfblob

Facing compilation errors in Sass due to grid issues

@media (min-width: 40em) { .article__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .article__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); ...

cssvisual-studio-codesassgrid

Removing the Arrow on a Number Input Field Using Tailwind CSS

Is there a way to remove the default increment/decrement arrows that come with an input of type number using Tailwind CSS? I've searched for a solution but haven't found one yet. input type="number" placeholder="Phone number" className="border ...

cssreactjsinputnumberstailwind-css

PHP script: Mask the last 4 digits of a phone number with asterisks

Hey there, I'm looking to obfuscate the last 4 digits of a number with asterisks. For instance: 123456789101 I want it to show as 12345678**** in my database (PHPMyAdmin) Below is the snippet of code that I have been working on: if(isset($_POST[&ap ...

phphtmlpassword-hash

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

javascriptjqueryhtmlasp.netangularjs

AngularJS's support for html5mode on GitHub pages is now available

Is it feasible for GitHub pages to accommodate AngularJS in html5mode? I came across a source online suggesting that it can be done with a fallback page for 404 errors. However, this solution seems flawed as it may result in multiple 404 errors, which wou ...

javascriptangularjshtmlgithub-pages

Ensuring that the div remains confined within the Container

The code snippet provided below demonstrates that the lowest level of items is located outside the container. I understand that this is due to the position:absolute; transform:translate(-33%). However, this has been the only method I have found so far to ...

htmlcss

Emails are failing to send when information is entered, instead sending a blank email when the page is

My contact form has server side validation in place to ensure that required fields are filled out. However, I'm facing an issue where if a user fails to enter information into a required field and presses the send button, no email is sent. On the othe ...

phphtmlemail

switch the anchor tag value and send it along with the URL

I am trying to update the value of "trans" in the Ajax URL based on a toggle between on and off values. However, despite successfully toggling the text, the URL parameter does not change accordingly. Can anyone offer any assistance? I currently have to rel ...

javascriptjqueryhtmlajax

What steps are required to establish a PHP development and production environment?

I find myself in the position of taking over a small PHP site that relies on a database. While I'm well-versed in C# programming and have experience with databases and web design, I am quite unfamiliar with PHP. My boss wants me to establish both a s ...

phphtmlweb-applicationsdevelopment-environmentphp-5.2

JavaScript function unable to access static file for image

I need assistance with dynamically displaying an image (a checkmark or "X") based on a variable. When I insert the image using a script directly in the HTML file, it functions correctly. However, when attempting to set the image from within the createEasyD ...

javascripthtml

Struggling to follow the placement of elements within the treeview component

I have successfully implemented a method to track the positions of Div elements on my webpage. However, I am facing an issue with keeping track of the position of a div within a modal popup extender that contains a TreeView. The position is always reset to ...

c#asp.nethtmlajaxmodalpopupextender

Activate the front camera on an Android device using HTML5 or JavaScript

I'm currently working on a web app that needs to access the front camera of Android phones running version 4.0 or higher. After taking a picture, the app should then upload the captured image to my own server. Is there a way to launch the front camer ...

javascriptandroidhtmlandroid-intent

Retrieve the data from the database using PHP and showcase it within the HTML code

Having an issue with my system, I tried following a tutorial on YouTube and made some modifications to the code. Here is what I have: <label>Department</label> <select> <?php include 'php/connect.php'; ...

phphtml

Is there a way to refresh the countdown timer?

I am working on creating a countdown timer using directives and want to add some CSS styles like fade-out when the time is changing. My issue lies in the HTML binding where the time is not updating visually, although it does change in the console. Here&ap ...

javascripthtmlcss

Choosing a single row from a Bootstrap React table

i have successfully implemented the Async Function to display data, as shown in the image. the table starts empty but gets populated after the await. However, I am facing an issue in finding a property to retrieve the selected row from the table. Is there ...

javascripthtmlreactjs

Having trouble converting the raw HTML input into a .doc file using cloudconvert

I am looking to convert HTML text into a doc file. I attempted to use the CloudConvert API console at to create a request. In the Code Snippets > HTML form section, it provided me with the following form: <form action="https://api.cloudconvert.com/ ...

htmldocxdocconverterscloudconvert

What is the process for saving selected values from a drop-down list into a database?

Hey there, I'm a newcomer to PHP and ajax. When choosing an option from the drop-down list, a separate div function should appear where I need to insert both the selected option and input data in different divs. Sorry for my poor English. Any help fro ...

javascriptphpjqueryhtmlajax

JavaScript unexpectedly populating array with unnecessary empty objects

During my attempt to create a calculator, I encountered an error while testing. After entering a number and selecting one of the operation buttons, I ran a console.log test and discovered 3 extra arrays lingering without purpose. You can find the JSFiddle ...

javascripthtmlarrays

Updating values using jQuery when tags in a single table row are changed

In my current setup, I have a table structured as follows: <table> <tbody> <tr> <td> <input type="text" class="identifier" /> </td> <td class="name"> Some value < ...

jqueryhtml