Making radio buttons look like buttons instead
EDIT: this isn't a solution if you need to support IE browsers.
You could use CSS appearance property:
$(':radio').on('change', function() {
console.log(this.id);
});
input[name=amount] {
display: none
}
.donate-now {
list-style-type: none;
margin: 25px 0 0 0;
padding: 0;
}
.donate-now li {
float: left;
margin: 0 5px 0 0;
}
.donate-now label {
padding: 5px;
cursor: pointer;
-webkit-appearance: button;
/* WebKit */
-moz-appearance: button;
/* Mozilla */
-o-appearance: button;
/* Opera */
-ms-appearance: button;
/* Internet Explorer */
appearance: button;
/* CSS3 */
}
.donate-now label:hover {
background: #DDD;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="donate-now">
<li>
<label for="a25">
<input type="radio" id="a25" name="amount">$25</label>
</li>
<li>
<label for="a50">
<input type="radio" id="a50" name="amount">$50</label>
</li>
<li>
<label for="a75">
<input type="radio" id="a75" name="amount" checked="checked">$75</label>
</li>
<li>
<label for="a100">
<input type="radio" id="a100" name="amount">$100</label>
</li>
<li>
<label for="other">
<input type="radio" id="other" name="amount">other:
<input type="text" id="otherAmount" name="numAmount">
</label>
</li>
</ul>
-webkit-appearance: button; /* WebKit */
-moz-appearance: button; /* Mozilla */
-o-appearance: button; /* Opera */
-ms-appearance: button; /* Internet Explorer */
appearance: button; /* CSS3 */
It can be done with CSS and without the need of a large framework. I have done this with checkboxes and radio buttons.
This works without adding new HTML, or bringing in any JS libraries. => jsFiddle
THE NEW ORDER OF THE HTML
This is the ten minute hacky version, you can clean it up even further, but it shows a good example of how simple it is.
.donate-now {
list-style-type: none;
margin: 25px 0 0 0;
padding: 0;
}
.donate-now li {
float: left;
margin: 0 5px 0 0;
width: 100px;
height: 40px;
position: relative;
}
.donate-now label,
.donate-now input {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.donate-now input[type="radio"] {
opacity: 0.01;
z-index: 100;
}
.donate-now input[type="radio"]:checked+label,
.Checked+label {
background: yellow;
}
.donate-now label {
padding: 5px;
border: 1px solid #CCC;
cursor: pointer;
z-index: 90;
}
.donate-now label:hover {
background: #DDD;
}
<ul class="donate-now">
<li>
<input type="radio" id="a25" name="amount" />
<label for="a25">$25</label>
</li>
<li>
<input type="radio" id="a50" name="amount" />
<label for="a50">$50</label>
</li>
<li>
<input type="radio" id="a75" name="amount" checked="checked" />
<label for="a75">$75</label>
</li>
<li>
<input type="radio" id="a100" name="amount" />
<label for="a100">$100</label>
</li>
<li>
<input type="radio" id="other" name="amount" />
<label for="other">other:</label>
</li>
<li>
<input type="text" id="otherAmount" name="numAmount" />
</li>
</ul>