What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

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.


  • Profile Image

    Changing images with custom CSS only

    Asked by ipunt on June 12, 2015 at 10:49 AM

    I created a form with a datefield and swapped the calendar icon.

    .showAutoCalendar {
        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?

     

    Ivo

    Screenshot
    different icon png content CSS image replace image
  • Profile Image
    JotForm Support

    Answered by Boris on June 12, 2015 at 11:39 AM

    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. :)

    .showAutoCalendar {
        background: center no-repeat url("http://www.widmar.nl/images/RESERVATION3WIT.png");
        width: 0 !important;
        padding-left: 400px;
        height: 98px;

    }

    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:

    http://www.jotformpro.com/form/51624968513966

    A screenshot from Firefox is attached below. Please let us know if you need further assistance.

  • Profile Image

    Answered by ipunt on June 12, 2015 at 07:23 PM

    Works like a charm. Thank you for your swift & accurate response.

    I

  • Profile Image

    Answered by raul on June 12, 2015 at 08:56 PM

    On behalf of my colleague, you're welcome.
    Feel free to contact us anytime, should you require our assistance.