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

input outside of label

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-08 14:21:13 -04:00
parent 0ef1eea4cd
commit 452c49fedb
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -15,22 +15,24 @@
background:lightgrey;
border-radius: 5px;
}
.block > *{ margin:10px 5px 10px 5px; }
.block > *:first-child{ margin-left:10px; }
.block > *:last-child{ margin-right:10px; }
.style--wide
{
width:100%;
}
label
.pad-normal
{
width:100%;
padding:10px;
}
input[type='radio']
{
display:block;
position:relative;
display: block;
position: relative;
top: 0;
left: 0;
margin: 0;
appearance: none;
}
input[type='radio']::before
@ -50,8 +52,8 @@
position: absolute;
width: 11px;
height: 11px;
top: 5px;
left: 5px;
top: 15px;
left: 15px;
border-radius: 20px;
background: #000;
}
@ -62,12 +64,11 @@
<form>
<div class="block">
<input id="check-1" type="radio" name="slot-1" value="option-1"/>
<label for="check-1">
<span class="text text--weight-bold text--size-normal">Credit Card</span>
<span class="text--two"></span>
<input class="pad-normal" id="check-1" type="radio" name="slot-1" value="option-1"/>
<label class="pad-normal" for="check-1">
<span>Credit Card</span>
</label>
<a class="style--axuillary" href="/">Change</a>
<a class="pad-normal" href="/">Change</a>
</div>
<div class="block">