SethTrowbridge/atomic-css
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

revert to input outside

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-08 14:52:42 -04:00
parent 452c49fedb
commit 89064da9e8
1 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@ -15,27 +15,27 @@
background:lightgrey;
border-radius: 5px;
}
.block > *
{
padding:10px 0 10px 10px;
}
.block > *:last-child
{
padding-right: 10px;
}
.style--wide
.block label
{
width:100%;
}
.pad-normal
{
padding:10px;
}
input[type='radio']
.block input[type='radio']
{
display: block;
position: relative;
top: 0;
left: 0;
margin: 0;
appearance: none;
}
input[type='radio']::before
.block input[type='radio']::before
{
content: " ";
display: block;
@ -45,7 +45,7 @@
border: 2px solid #000;
border-radius: 20px;
}
input[type='radio']:checked::after
.block input[type='radio']:checked::after
{
content: " ";
display: block;
@ -64,31 +64,24 @@
<form>
<div class="block">
<input class="pad-normal" id="check-1" type="radio" name="slot-1" value="option-1"/>
<label class="pad-normal" for="check-1">
<input id="check-1" type="radio" name="slot-1" value="option-1"/>
<label for="check-1">
<strong>Credit Card</strong><br>
<span>Credit Card</span><br>
<span>Credit Card</span><br>
<span>Credit Card</span><br>
<span>Credit Card</span>
</label>
<a class="pad-normal" href="/">Change</a>
<a href="/">Change</a>
</div>
<div class="block">
<div class="icon--radio"></div>
<div class="style--wide">
<label for="check-2">Credit Card <input id="check-2" type="radio" name="slot-1" value="option-2"/></label>
<br>
<span>Check it</span>
</div>
<a class="style--axuillary" href="/">Change</a>
</div>
<div class="block">
<input id="check-3" type="radio" name="slot-1" value="option-3"/>
<p style="width:100%;">
<label for="check-3">Credit Card</label>
<br>
<span>Check it</span>
</p>
<a class="" href="/">Change</a>
<input id="check-2" type="radio" name="slot-1" value="option-2"/>
<label for="check-2">
<strong>Paypal</strong><br>
<span>also good</span>
</label>
<a href="/">Change</a>
</div>
</form>