Span element not displaying as a clickable hyperlink

The magnifying glass icon inside the orange search bar at the top of this page is not appearing as a link, so when hovered over there is no pointer.. Any thoughts on why this might be?

Below is the CSS:

.searchGlass {
background-image: url(/images/searchicon.png);
background-position: left 1px;
background-color: rgba(0, 0, 0, 0);
display: block;
height: 18px;
position: relative;
top: -24px;
width: 15px;
background-repeat: no-repeat;
left: 7px;
}

.hideText {
text-indent: 125%;
white-space: nowrap;
overflow: hidden;
}

.submit {
margin: 1em 0 0 0;
width: 30px;
height: 30px;
text-transform:uppercase;
font-size:15px;
padding: 6px 13px;
cursor:pointer;
border-radius: 20px;
}

And here is the html:

<div class="left"><input type="submit" class="submit hideText" value=""/><span class="searchGlass hideText">Go</span></div>

Thank you.

htmlcss

Answer №1

Why not give this a shot:

<div class="right">
     <button class="send"><span class="searchIcon hideText">Proceed</span></button>
</div>

Along with some CSS magic:

.searchIcon {
    background-color: transparent;
    background-image: url("/images/searchicon.png");
    background-position: left 1px;
    background-repeat: no-repeat;
    display: block;
    height: 18px;
    position: relative;
    width: 15px;
}

Answer №2

If you want to submit using JavaScript, you can do the following:

<a href="#" onclick="submit();"><span class="searchGlass hideText">Go</span></a>

Answer №3

When working with spans in HTML, it's important to note that the default display setting is inline. To change this to block and then float it where desired, you can follow these steps:

.hideText {
  text-indent: 125%;
  white-space: nowrap;
  overflow: hidden;
  width:50px; /* Make sure to use your preferred dimension */
  height:50px;
  display:block;
  float:left;
}

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

Use column formatting for the table's body section

I have written the code below in HTML to create a table. I am looking to apply a specific style to the table body elements in a column that has been assigned a CSS class, while excluding the header columns from this style application. As an example, I hav ...

javascriptjqueryhtmlcss

Transferring information from various HTML forms using JQuery's ajax functionality

Hello there! I have recently started learning how to use jQuery AJAX for file uploads. Currently, I am working with a simple HTML form and including JavaScript/jQuery code within it to make an AJAX request. <!DOCTYPE HTML> <html> <head> ...

phpjqueryhtmlajax

Capture input before onChange and ideally only accept numerical values

Preparing for inexperienced users, I have a table of input fields. My goal is to enhance user experience and make the form as user-friendly as possible. I have developed code that highlights the table row immediately after an input field has changed. Howe ...

javascriptjqueryhtmlforms

Image fails to download on Safari and iPhones in PHP

Can anyone help me figure out why images are opening in a new window instead of downloading inside Chrome and Firefox on my iPhone? ...

phphtmlwordpress

Prompting the website to 'refresh' and return to the beginning of the page

My website's functionality is closely tied to the user's position on the page. Different features are triggered once specific distances are reached. I am seeking a way for users to automatically return to the top of the page upon page reload. Cu ...

javascriptjqueryhtml

Align a Bootstrap button to the bottom of a flex-box column

After exploring numerous online discussions in search of a solution to my issue, I have come up short. Applying 'align-self: flex-end' to the .reveal-btn only moves the button to the right, whereas using 'margin-top: auto' has proven in ...

htmltwitter-bootstrapcssflexboxbootstrap-4

Conceal the server's internal file structure to prevent it from being displayed in sources

When I visit my website and inspect the elements in Google Chrome, I am able to see a list of all the folders on my site under the sources tab. This reveals their original names and allows for the downloading of the entire website code. I am concerned abo ...

phpcss.htaccessjoomlaamazon-ec2

Layout featuring center-aligned fixed-width design with elements stretching across the entire width of the page

How can I create a centered fixed-width layout for my page while also having headings with a background that extends over the whole page, without having to break up the single fixed-width+margin auto div into many separate divs? ...

htmlcss

Smoothly automate horizontal scrolling using JavaScript

My programming journey involved creating a code snippet that automatically scrolls paragraphs horizontally, giving it the appearance of "Breaking News" updates on popular websites. The Javascript script I implemented performs automatic scrolling, but once ...

javascriptcss

Creating a default homepage across various HTML files using Google Apps Script and deploying it as a WebApp

Is there a way to set a default main page on multiple HTML and GS files in Google AppScript? I plan to publish it as a Web App. Have you attempted using the doGet function? ...

javascripthtmlcssgoogle-apps-script

How can I adjust the alignment of my menu items to be centered without using flexbox?

Even though I've searched extensively on how to center text horizontally, none of the suggestions have worked for me. I attempted using margin-left: auto, margin-right: auto, and text-align: center for the class nav-center, but none of them had the de ...

htmlcss

Echo command fails to work with location.href

I am facing a small issue with my PHP echo. I have a JavaScript link function that is not working because the HTML code shows this type of link onclick="location.href="http://www.link.com/";". It's clear that this syntax won't work. However, if w ...

javascriptphpjqueryhtml

Creating a personalized notification box that is compatible with various screen sizes and web browsers on android devices with the help of

After successfully implementing a custom alert box to hide the header with JavaScript, I encountered an issue when trying to use it on different browsers and Android devices. The alert box appeared misplaced on the page and was too big for certain Android ...

javascriptandroidcsscross-browserhybrid

Adjust the height of a div using jQuery once the AJAX call retrieves the data

There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery ca ...

javascriptjquerycssajax

Show a triangle positioned on the left side of the display

Looking for help with aligning a div to the left side of the screen CSS #nav { position: fixed; height: 50px; width: 50px; display: block; background-color: #000; } This particular div contains an icon that acts as a link HTML <div id="nav"> ...

htmlcss

When setting an attribute on load, Javascript may not properly apply the change to the attribute

I designed a webpage where images have a fade-in effect using a CSS class. Initially, 4 images load with the desired effect. However, I encounter an issue when trying to apply the same effect to a new image that appears upon clicking a button. Below is th ...

javascripthtml

How can I make columns with a max-width expand fluidly?

I am currently using a fluid/responsive column layout that looks like this: .row{ float:left; max-width:960px; width:100%; } .column{ float:left; margin:0 15px; } .column:first-child{ margin-left:0; } .column:last-child{ mar ...

htmlcssgridfluid-layout

The ng-route feature seems to be malfunctioning and I am unable to identify the error, as no information is being displayed in the console

Here is the code in my boot.php file where I have set up the links <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#/valley">Valley</a></li> <li role="presentation"><a href="#/beach"> ...

javascriptphphtmlangularjs

ng-html-bind for a label with a checkbox

Currently, I have a view that uses the standard bootstrap layout for checkboxes. In this layout, the input is located within the label tag. <div class="checkbox"> <label ng-bind-html="vm.trustedHtml"> <input type="checkbox" ng- ...

javascripthtmlangularjshtml-sanitizing

Efficiently rearranging elements by adjusting their top values techniques

My iPhone lockscreen theme features various elements displaying weather facts such as text and small images. Currently, these elements are positioned in the middle of the screen and I want to move them all to the top. Each element has a unique position abs ...

javascripthtmlcsspositioning