<form action="#"> <div> <h2>With spinbuttons</h2> <div class="form-row"> <label for="c1">Currency</label> <input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="currency" id="c1" /> </div> <div class="form-row"> <label for="c2">Currency w bootstrap</label> <div class="input-group"> <span class="input-group-addon">$</span> <input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" /> </div> </div> <hr /> <div class="hide-inputbtns"> <h2>Without spinbuttons</h2> <div class="form-row"> <label for="c1">Currency</label> <input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="currency" id="c1" /> </div> <div class="form-row"> <label for="c2">Currency w bootstrap</label> <div class="input-group"> <span class="input-group-addon">$</span> <input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" /> </div> </form> <p><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-number.html" target="_blank">number configurator</a> </p>
webshims.setOptions('forms-ext', { replaceUI: 'auto', types: 'number' }); webshims.polyfill('forms forms-ext');
form { margin: 20px auto; width: 420px; } .form-row { padding: 5px 10px; } label { display: block; margin: 3px 0; } .form-row input { padding: 3px 1px; width: 100%; } input.currency { text-align: right; padding-right: 15px; } .input-group .form-control { float: none; } .input-group .input-buttons { position: relative; z-index: 3; }