I have a price calculation form which looks very basic. I want to make it look little better. Like the '+' and '-' button look like bootstrap button and having a shadow. I also want to have a subtle background, I can't think of any idea. Please someone help me. This is my basic price calculator.
Javascript code
<script type="text/javascript">
function Total(qty, ud, total, value) {
qty = document.getElementById(qty);
ud > 0 ? qty.value++ : qty.value--;
qty.value = Math.max(qty.value, 0);
document.getElementById(total).value = qty.value * value;
}
</script>
<style>
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}
</style>
html code
<div id="purhcaseForm">
<form id="purchase1">
<br> Please Select Number of Pages:
<br>
<input type='button' name='subtract' onclick='Total("qty",1,"total",8);' value='-' />
<input type='button' name='add' onclick='Total("qty",1,"total",8);' value='+' />
<input type='text' name='qty' id='qty' readonly=true value="0" />
<span class="currencyinput">$<input type='text' name='total' id='total' value="0" /></span>
</form>
</div>
<div id="purhcaseForm">
<form id="purchase2">
<br> Please Select Number of Pages:
<br>
<input type='button' name='subtract' onclick='Total("qty1",-1,"total1",7);' value='-' />
<input type='button' name='add' onclick='Total("qty1",1,"total1",7);' value='+' />
<input type='text' name='qty1' id='qty1' readonly=true value="0" />
<span class="currencyinput">$ <input type='text' name='total1' id='total1' value="0" /></span>
</form>
</div>
<div id="purhcaseForm">
<form id="purchase3">
<br> Please Select Number of Pages:
<br>
<input type='button' name='subtract' onclick='Total("qty2",-1,"total2",6);' value='-' />
<input type='button' name='add' onclick='Total("qty2",1,"total2",6);' value='+' />
<input type='text' name='qty2' id='qty2' readonly=true value="0" />
<span class="currencyinput">$ <input type='text' name='total2' id='total2' value="0" /></span>
</form>
</div>
<div id="purhcaseForm">
<form id="purchase4">
<br> Please Select Number of Pages:
<br>
<input type='button' name='subtract' onclick='Total("qty3",-1,"total3",5);' value='-' />
<input type='button' name='add' onclick='Total("qty3",1,"total3",5);' value='+' />
<input type='text' name='qty3' id='qty3' readonly=true value="0" />
<span class="currencyinput">$ <input type='text' name='total3' id='total3' value="0" /></span>
</form>
</div>
</body>