JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Changing images with custom CSS onlyAsked by ipunt on June 12, 2015 at 10:49 AM
I created a form with a datefield and swapped the calendar icon.
content : url(http://www.widmar.nl/images/RESERVATION3WIT.png);
This works perfectly on safari but mysteriously changes back to the former icon on Firefox.
Does anyone have a solution?
different icon png content CSS image replace image
You see this issue because Safari, Chrome, and other WebKit / Blink based browsers support a non-standard way of actually changing content with CSS, by using the content property. The content property, by standards and at this time, is only allowed to be used within CSS generated ::before and ::after pseudo-elements. http://www.w3.org/TR/css3-content/#pseudo-elements
Bottom line is that CSS is a presentational language, and it was never meant to be able to change website content at all - only the appearance and presentation. The use case as allowed by Safari/Chrome is not currently planned to be standardized by people that develop CSS language, and is unlikely to be supported by Internet Explorer or Firefox based browsers any time soon.
If you wish to replace IMG elements with your own images by using cross-browser, valid CSS, there is still a way. :)
background: center no-repeat url("http://www.widmar.nl/images/RESERVATION3WIT.png");
width: 0 !important;
We need to set width to zero, so that the real image is collapsed. Then, we add a supplementory space with padding-left that will hold the width of the new image, and we specify the height of the new image. New image is then set with regular background property.
I have cloned your form and made these changes, so that you can test it out:
A screenshot from Firefox is attached below. Please let us know if you need further assistance.
Works like a charm. Thank you for your swift & accurate response.
On behalf of my colleague, you're welcome.
Feel free to contact us anytime, should you require our assistance.