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

25
index.html
View File

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