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