Dealing with RGBA values

by trixta

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<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>

CSS

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;
}

JavaScript

webshims.setOptions('forms-ext', {
            replaceUI: 'auto',
            types: 'color range number'
        });
        webshims.polyfill('forms forms-ext');