Enhance placeholder opacity during transition on Firefox

Trying to create a smooth transition effect for input placeholders on focus, but encountering issues with Firefox.

<input type="text" placeholder="some cool text"/>

input:focus::-moz-placeholder {
    opacity: 0.1;
}
input::-moz-placeholder {
    opacity: 1;
    transition: opacity 1s;
}
input::-moz-placeholder {
    opacity: 1;
}
input:focus::-webkit-input-placeholder {
     opacity: 0.1;
}

Link to Example

This functionality works smoothly in Chrome, however, there are compatibility issues in Firefox and not working correctly in IE as well. The placeholder opacity changes correctly on focus, but the 1-second transition effect does not seem to be applied.

EDIT: It seems to be a bug specific to the latest version of Firefox (20.0.1)

htmlcsscss-transitions

Answer №1

What do you think of this approach? Instead of relying on opacity, why not switch up the color tones?

Check out the demo here

<input type="text" placeholder="some cool text"/>

input[type=text]:-moz-placeholder {
color: #000;
transition: color 1s;
}

input[type=text]:focus:-moz-placeholder {
    color: #aaa;
}

input[type=text]::-webkit-input-placeholder {
    color: #000;
    transition: color 1s;
}

input[type=text]:focus::-webkit-input-placeholder {
    color: #aaa;
}

You could certainly opt for using opacity if you prefer, but it might be worth experimenting with both options to see which one suits your needs better. Take a look at the sample results and decide for yourself: opacity demo

Please note: For compatibility with version +19, make use of ::-moz-placeholder

Answer №2

It has come to light that the transition on ::placeholder should not be supported by any browser due to it being undefined by the specification, making it non-standard behavior. The absence of support for this feature in Firefox is deemed as correct:

https://bugzilla.mozilla.org/show_bug.cgi?id=1115623

According to the specification, only the ::after and ::before pseudo-elements have the transition property enabled. All other pseudo-elements do not.

For further insights, check out: Why is a transition property on the placeholder pseudoelement valid in Chrome?

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

The issue of the v-list-item-title text color remaining static in v-navigation-drawer when active has been noted

I'm currently working on developing an application using the Vuetify framework. I've encountered an issue while trying to modify the CSS properties of v-list-item. The main problem arises when an item is active, as everything seems to work fine ...

cssvue.jscss-selectorsvuetify.jsvue-router

"My JavaScript code for toggling visibility is not functioning properly. Any suggestions on how to fix

I am currently working on a task that involves showing and hiding container1, but I am confused as to why my code is not functioning properly. The task requirements are as follows: - Clicking on the "Show" button should display container1 - Clicking on the ...

javascripthtml

Display issue with Django SelectDateWidget

Having some trouble rendering the built-in SelectDateWidget in Django. When I try, it displays as <django.forms.widgets.SelectDateWidget object at 0xb4f6bc6c> Submit As a newcomer to Django, I've gone through the documentation and searched onl ...

pythondjangohtmldjango-formsdjango-widget

Changing the color of an SVG as I scroll to the bottom of the page

On my React page, I am looking to change the color of an SVG element from black to white at the bottom of the page. Is there a React-specific method for accomplishing this task? The div container located at the bottom of the page is not the parent div fo ...

cssreactjssvg

Using Bootstrap to shift columns away from the center

I am new to using Bootstrap and facing some issues with aligning my content centrally. My goal is to constrain the content width while allowing the background colors to extend across the full width of the page. I have attempted to use offset columns, but ...

cssbootstrap-4

Accessing and displaying a randomly selected PDF file from a directory using HTML coding

Welcome to my recipe collection website where I document all the delicious recipes I love to eat. One feature I would like to add is a 'random' button, so that a recipe will be selected at random for me without having to make a decision. Althou ...

htmlfilepdfrandomrandomaccessfile

Using JavaScript/jQuery to implement a mouseover effect with a delay

I'm struggling with a code that reveals hidden divs after a slight delay on mouseover. The issue I'm facing is that I lack expertise in CS, and within that code, there are elements as follows: $(document).ready(function() { var timer; var ...

javascriptjqueryhtmlcssmouseover

Is there a way to refresh a webpage without the need to reload it

Imagine a scenario where a tab on a website triggers the loading of a specific part of the webpage placed within a div. For example, clicking on a tab may trigger the loading of a file named "hive/index.php". Now, if a user selects an option from an auto ...

javascriptjqueryhtml

How to Build a Custom Toolbar with Left and Right Aligned Elements using React.js and Material UI

Struggling with updating the toolbar on my website. Wanting the site name and logo on the left side, while login/sign-up buttons fixed to the right. Logo and title are in place, but can't get buttons to stay on right margin. Here's the code: func ...

javascripthtmlreactjsmaterial-ui

Disable body scrolling when modal is open and automatically scroll to the top of the page

I've been experimenting with various methods, but I haven't been successful in getting this to function properly. After some trial and error, I stumbled upon a technique that effectively stops the body from scrolling when the modal is open: bod ...

cssbootstrap-4bootstrap-modal

Selenium is having trouble reading the text from a dropdown that has the autocomplete feature disabled

It seems that Selenium is having trouble retrieving the text from the dropdown options. Here is a snippet of the code I am working on: WebElement dropdown=driver.findElement(By.id("selFromAccount")); List<WebElement> dropoptions=dropdown.findElemen ...

jqueryhtmlcssseleniumautocomplete

Executing a Javascript function post AJAX page loading

I'm not a coding expert, so I hope my question is still clear. Essentially, I have an index.php page with filters (by project, year, month) that send variables to filterData.php after clicking submit. These variables are then used in SQL statements t ...

phpjavascriptcssajaxsiblings

Changing the shape of a background using CSS when hovering

My Bootstrap navigation has a unique setup, as shown below. I've observed that many users tend to only interact with the headings and ignore the submenus where the actual products are located. To address this issue, I want to change the design of th ...

javascripthtmlcss

The dimensions of the svg remain constant in width and height

Every time I attempt to adjust the height and width of the svg tag, it changes but the map inside gets cut off. This is an example of the svg file <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www. ...

javascripthtmlsvg

Dynamic transition when selecting a navigation bar link in Bootstrap

Check out my website here: On my webpage, I have 3 navigation links which are: Who We Are What We Do Contact Us I have set up the "a href" tag to link to each section of the page when clicked. My query is, how can I create a sliding effect when clicki ...

htmlcsstwitter-bootstrapbootstrap-4

Enter your phone number in the designated field

I am looking to receive mobile numbers from various countries as input. I attempted to achieve this using the following code: <input type="tel" minlength="8" maxlength="10" name="Number" id="Number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" class="form-co ...

htmlvalidationbootstrap-4

How can I ensure that the search form stays aligned with the other elements in the navbar using Bootstrap CSS?

I am new to CSS and I am facing an issue with my search form in the navbar. When I initially load the page, the search form appears on 2 lines but when I refresh the page, it aligns properly with the other elements. How can I ensure that the search form st ...

csstwitter-bootstrap

Adjust the position of all content below when the specific div slides down

I am attempting to create a notification div that smoothly slides down when active. The sliding effect is achieved through this script: <script type="text/javascript> $(document).ready(function(){ $('#notice').slideDown(1000); ...

javascriptjqueryhtmlcss

How can I replicate the functionality of a div mimicking a select element using javascript upon clicking away from the element?

My task was to design a pseudo-select element that showcases columns for each row within the select. Due to HTML's restriction on allowing the <option> tag to include HTML, I had to find an alternate solution. One issue I encountered was replic ...

javascripthtmljqueryselectclick

Acquiring JSON information from an external source

My goal is to extract data from a JSON file called destinations.json and display it in a dropdown menu on an HTML page. The structure of the JSON file is as follows: { "Destinations": [ { "destinationName": "London", "destinationID ...

jqueryhtmljson