The basic HTML color picker can be created using the following logic:
html
or
html
If you are not happy with the basic HTML color picker, then you can use the MFColorPicker to improve this. This will enhance the basic HTML input by adding in a tick to beside the input field (something I believe is missing from the standard Windows UX), and it also maintains the color selection defaults, adding the latest selected color to the front of the defaults.
Basic HTML with list | MFColorPicker |
---|---|
To implement you only need to include the .js file in order to initalize existing inputs
js
By default, the class will assume material-icons is your chosen tick font, but if you want to change this then change the init call using the second and third arguments (class, value)
js
Note, it would be good to add a cross, but this is not possible as the selector is a modal popup.
This class also requires material-icons to have the tick work.
html
Also see MFColorPicker for a richer experience UI widget.
Also see
articles/HTML-hex-color-codessquarearticles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment