<p>
<input type="text" placeholder="Use this field to focus the radio buttons" size="50">
</p>
<ul class="payment-methods">
<li class="payment-method paypal">
<input name="payment_methods" type="radio" id="paypal">
<label for="paypal">PayPal</label>
</li>
<li class="payment-method pagseguro">
<input name="payment_methods" type="radio" id="pagseguro">
<label for="pagseguro">PagSeguro</label>
</li>
<li class="payment-method bankslip">
<input name="payment_methods" type="radio" id="bankslip">
<label for="bankslip">Boleto</label>
</li>
</ul>
body {
padding: 25px;
}
.payment-methods {
list-style: none;
margin: 0;
padding: 0;
}
.payment-methods:after {
content: "";
clear: both;
}
.payment-method {
border: 1px solid #ccc;
box-sizing: border-box;
float: left;
height: 70px;
position: relative;
width: 120px;
}
.payment-method label {
background: #fff no-repeat center center;
bottom: 1px;
cursor: pointer;
display: block;
font-size: 0;
left: 1px;
position: absolute;
right: 1px;
text-indent: 100%;
top: 1px;
white-space: nowrap;
}
.payment-method + .payment-method {
margin-left: 25px;
}
.pagseguro label {
background-image: url(https://dl.dropbox.com/s/yvzrr9o54s2llkr/uol.png);
}
.paypal label {
background-image: url(https://dl.dropbox.com/s/i4z39zy2mtb7xq1/paypal.png);
}
.bankslip label {
background-image: url(https://dl.dropbox.com/s/myj41602bom0g8p/bankslip.png);
}
.payment-methods input:focus + label {
outline: 2px dotted #21b4d0;
}
.payment-methods input:checked + label {
outline: 4px solid #21b4d0;
}
.payment-methods input:checked + label:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2hlY2tlZDwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iY2hlY2tlZCIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPHBhdGggZD0iTTEwLjAwNDkyODUsMjAgQzE1LjQ5NTMxNzksMjAgMjAsMTUuNDkzMDk2NiAyMCwxMCBDMjAsNC40OTcwNDE0MiAxNS40OTUzMTc5LDAgOS45OTUwNzE0NiwwIEM0LjUwNDY4MjExLDAgMCw0LjQ5NzA0MTQyIDAsMTAgQzAsMTUuNDkzMDk2NiA0LjUwNDY4MjExLDIwIDEwLjAwNDkyODUsMjAgWiIgZmlsbD0iIzIxQjREMCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNOS4wNDQ0MDE1NCwxNiBDOC41OTA3MzM1OSwxNiA4LjIzMzU5MDczLDE1Ljc3NDM1OSA3Ljk1MzY2Nzk1LDE1LjQyNTY0MSBMNS4zMzc4Mzc4NCwxMi4xNjQxMDI2IEM1LjA5NjUyNTEsMTEuODc2OTIzMSA1LDExLjYxMDI1NjQgNSwxMS4yOTIzMDc3IEM1LDEwLjYyNTY0MSA1LjUzMDg4ODAzLDEwLjA5MjMwNzcgNi4xNDg2NDg2NSwxMC4wOTIzMDc3IEM2LjUwNTc5MTUxLDEwLjA5MjMwNzcgNi43ODU3MTQyOSwxMC4yNTY0MTAzIDcuMDM2Njc5NTQsMTAuNTUzODQ2MiBMOS4wMjUwOTY1MywxMy4wNTY0MTAzIEwxMi44MTg1MzI4LDYuNjg3MTc5NDkgQzEzLjA5ODQ1NTYsNi4yMzU4OTc0NCAxMy40MTY5ODg0LDYgMTMuODMyMDQ2Myw2IEMxNC40NDAxNTQ0LDYgMTUsNi40ODIwNTEyOCAxNSw3LjE0ODcxNzk1IEMxNSw3LjQwNTEyODIxIDE0LjkwMzQ3NDksNy42OTIzMDc2OSAxNC43MzkzODIyLDcuOTU4OTc0MzYgTDEwLjEyNTQ4MjYsMTUuMzY0MTAyNiBDOS44NjQ4NjQ4NiwxNS43NTM4NDYyIDkuNDY5MTExOTcsMTYgOS4wNDQ0MDE1NCwxNiBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
bottom: -10px;
content: "";
display: inline-block;
height: 20px;
position: absolute;
right: -10px;
width: 20px;
}
@-moz-document url-prefix() {
.payment-methods input:checked + label:after {
bottom: 0;
right: 0;
background-color: #21b4d0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.