Icon Input Widget

Turns normal input fields into input fields with a provided background image.

Example

The "icon-input" activates the widget and attaches the needed styles for the background image which is provided by the data-icon attribute.

<input data-gx-widget="icon_input" data-icon="url/to/image-file.png"/>
Source:
To Do:
  • Add automatic image dimension adjustment. Images - for example if they are too big in dimensions - won't scale correctly at the moment.