Changing images with custom CSS only

  • ipunt
    Asked 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

    Jotform Thread 587332 Screenshot
  • Boris
    Replied 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.

    Changing images with custom CSS only Image 1 Screenshot 20

  • ipunt
    Replied on June 12, 2015 at 7:23 PM

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

    I

  • raul
    Replied on June 12, 2015 at 8:56 PM

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