Strategies for Concealing an Image When CSS is Active in Internet Explorer

My login functionality includes an input box with a CSS image that disappears onclick, allowing users to enter information. I used an image because the text password displays as "*", but this setup is not working in IE. Can anyone assist?

HTML:

<form class="additemsignupformlivregister">
  <div class="logininputdiv">
    <input type="text" class="filterinput clearField">
  </div>
  <div class="logininputdiv">
     <input type="password" class="filterinputpassword clearField">
  </div>
 </form>

CSS:

.filterinput {
-moz-border-radius:3px;
border-radius:3px;
-webkit-border-radius:3px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 2px #9B9B9C inset;
color: #9b9b9c;
font-family: arial;
font-size: 12px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
margin-left: -3px;
padding-left: 5px;
padding-right: 10px;
width: 170px;
background-image: url("../images/enteremail.png");
background-repeat: no-repeat;
}

Even though the image disappears on click in Firefox, Chrome, and Safari, it doesn't work in IE. Any help is appreciated. Thanks.

.filterinput:focus{
box-shadow:0 0 2px #000000 inset;
-moz-box-shadow:0 0 2px #000000 inset;
-webkit-box-shadow:0 0 2px #000000 inset;
color: #000000;
background: none;
}
internet-explorerinputcss

Answer №1

Unfortunately, Internet Explorer versions 5.5, 6, and 7 do not offer support for the :focus css selector.

To work around this limitation, consider adding an id to your password input field.

<input id="password" type="password" class="filterinputpassword clearField">

Include the following script in the head tag of your HTML:

<!--[if lte IE 7]>
<script type="text/javascript">
    var password = document.getElementById("password");
    var defaultClasses = this.className;
    password.onfocus = function () {
        this.className = defaultClasses + " focus";
    }
    password.onblur = function () {
        this.className = defaultClasses;
    }
</script>
<![endif]-->

Additionally, make sure to add the corresponding styles to your CSS file:

.filterinput:focus, .filterinput.focus { /* same as before */ }

If you are using jQuery, a simpler alternative is available:

<!--[if lte IE 7]>
<script type="text/javascript">
    $(function(){
        $("input:password").bind("focus blur", function() { 
            $(this).toggleClass("focus"); 
        });
    });
</script>
<![endif]-->

This approach helps optimize performance by targeting only specific browser versions that require these adjustments.

Remember to define the css class .filterinput.focus for proper styling.

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

Ways to reveal concealed div elements when hovering the mouse?

Is there a way to display a group of hidden div's when hovering over them? For instance: <div id="div1">Div 1 Content</div> <div id="div2">Div 2 Content</div> <div id="div3">Div 3 Content</div> All div's sho ...

javascriptjqueryhtmlcssmouseover

A missing semicolon is encountered while compiling a React application

I am currently working on my app using Create React App and incorporating scss. I have used a vscode plugin to convert the scss to css, but I keep encountering an error when running npm run build. The error message reads as follows: [email protected ...

cssreactjssassbuild

Having trouble getting this JavaScript query to function properly

The initial div in the code snippet below showcases the name of a university. When this name is clicked, it activates the function display_people(). This function is responsible for displaying or hiding the individuals associated with that university. The ...

javascriptjqueryhtmlcss

Appearing text dialogue

Can you tell me the name of the box that appears on top of a webpage? A couple of examples include: Facebook photos - It dims the background webpage and opens a separate pop-up to display pictures. Advertisements - The box that typically requires clickin ...

htmlcsspopup

Switching out CSS files on the fly in ASP.NET

Looking to dynamically change the CSS file being used in my ASP.NET Web Application when it's running. Imagine I have two CSS files, red.css and blue.css. I attempted the following method: In the Master Page, I have this link: <link rel="Styles ...

c#asp.netcsstheming

Challenge with Hovering within Cufon Elements

When utilizing multiple lists and hover states, the parent Cufon style takes over the child. For instance, in the scenario below, when hovering over the Second Level link, it will switch to a different weight. Is there a setting I can adjust to keep the n ...

jqueryhtmlcsstypescufon

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

cssgoogle-chrome-app

Can a class be created using a PHP variable as its basis?

Is it possible to define the body color based on a variable in PHP? I have been experimenting with different methods to achieve this. <?php $seperate_sitting_yes = "Yes"; if($seperate_sitting_yes == "Yes") { ?> <style type="text ...

phpcss

The application appears differently on a phone compared to how it looks on the ripple platform

Recently started experimenting with Apache Cordova, attempting to create a basic application. Here is how it looks in Google Chrome using Ripple for PhoneGap/Cordova emulation: https://i.sstatic.net/2MSwl.png When I click on the button, this is the resul ...

androidhtmlcsscordovaripple

Parsing all HTML elements using Nokogiri

I've been searching everywhere and all I could find was how to use CSS selection with Nokogiri. What I really need is to completely remove all HTML tags. For instance, this: <html> <head><title>My webpage</title></head& ...

htmlcssrubyhtml-parsingnokogiri

A guide on creating a downward animation of an object using CSS3

I am currently working on practicing CSS 3 animation. I am facing a challenge in figuring out how to make the item fall down the page at full speed without needing the user to track it downward with the mouse, all without using javascript. Ideally, I want ...

css

The text/font-weight of the header button is mysteriously shifting without warning

While creating a header for my webpage, I encountered an issue where the text family was changing when the dropdown menu was launched in Safari 8. Curiously, this behavior did not occur when using Chrome to launch the jQuery function. Even after attempting ...

javascriptjqueryhtmlcssfonts

Unusual Occurrence: Unexpected Gap at the Beginning of HTML

There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists. After inspecting the ...

csshtml

Utilizing jQuery to Manage Trays | Automatically Close Tray on Second click

I am working on a navigation menu with four buttons and a section that contains four additional sections. The functionality I am trying to achieve is that when a navigation button is clicked, a corresponding section slides out while the previous one slides ...

jqueryhtmlcss

Position a single div on the left-hand side and arrange two divs on the right using display:flex

Is there a way to achieve this layout without adding another div, using only parents and 3 child elements? I had tried using height: max-content, but it didn't work as expected. .container { display: flex; flex-wrap: wrap; } .item { flex-bas ...

htmlcssflexbox

Having trouble finding the element with the xpath/css locator in Selenium

I am currently developing a tree view folder structure. Here is the code snippet I am working with: Code: package Selenium_Practice; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.o ...

cssseleniumxpath

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

jqueryhtmlcss

Applying padding to an absolute div inside a Bootstrap 4 parent container does not function correctly

I'm trying to create a div with absolute position inside of another div with relative position using Bootstrap 4 like this: .p-r{ padding:8px; background-color:#ddd; height:100px; } .p-a{ bottom:3px; background-color:#000 } <link re ...

htmlcsstwitter-bootstrapbootstrap-4

Displaying HTML elements conditionally in React depending on boolean values

Developing a component that limits the display of text to the first 40 characters, but can show the full description when a Chevron click event is triggered. The goal is to have the content expand in a similar fashion as it currently does with the Accord ...

htmlcssreactjsonclickstyled-components

Create tab title CSS design that coordinates with the tab content and features circular corners

I am currently working on creating html + css tabs with a unique design. The goal is to have the selected tab display the title connected to the tab content, with a "neck" rounding in like an arrow. After some progress, I have reached a point where the im ...

htmlcsspsd