<form action="#"> <div class="form-row"> <label for="color-1">Color with alpha number</label> <input type="color" data-alphacontrol="alpha-number" id="color-1" /> <input type="number" id="alpha-number" min="0" step="0.01" max="1" value="1" /> </div> <div class="form-row"> <label for="color-2">Color with alpha range</label> <input type="color" data-alphacontrol="alpha-range" id="color-1" /> <input type="range" id="alpha-range" min="0" step="0.01" max="1" class="show-activevaluetooltip" value="100" /> </div> <div class="form-row hide-alpha"> <label for="color-2">Color with hidden alpha-control</label> <input type="color" data-alphacontrol="alpha-hidden" data-color-button-only="true" id="color-1" /> <input type="number" id="alpha-hidden" min="0" step="0.1" max="100" value="100" /> </div> </form> <p><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-color.html" target="_blank">Colorpicker configurator</a></p>
webshims.setOptions('forms-ext', { replaceUI: 'auto', types: 'color range number' }); webshims.polyfill('forms forms-ext');
form { margin: 10px auto; width: 400px; } .form-row { padding: 5px 10px; } label { display: block; margin: 3px 0; } .form-row input { padding: 3px 1px; } .form-row input[type="color"] { width: 120px; } .form-row input[type="range"] { width: 210px; } .form-row input[type="number"] { width: 50px } .hide-alpha .ws-number, .hide-alpha .number-input-buttons { display: none; }