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

radio icon styles

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-08 14:05:57 -04:00
parent 5999fc90dd
commit 0ef1eea4cd
1 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -23,29 +23,73 @@
{ {
width:100%; width:100%;
} }
label
{
width:100%;
}
input[type='radio']
{
display:block;
position:relative;
appearance: none;
}
input[type='radio']::before
{
content: " ";
display: block;
position: relative;
width: 17px;
height: 17px;
border: 2px solid #000;
border-radius: 20px;
}
input[type='radio']:checked::after
{
content: " ";
display: block;
position: absolute;
width: 11px;
height: 11px;
top: 5px;
left: 5px;
border-radius: 20px;
background: #000;
}
</style> </style>
</head> </head>
<body> <body>
<form> <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>
</label>
<a class="style--axuillary" href="/">Change</a>
</div>
<div class="block"> <div class="block">
<div class="icon--radio"></div> <div class="icon--radio"></div>
<div class="style--wide"> <div class="style--wide">
<label for="check-1">Credit Card <input id="check-1" type="radio" name="slot-1" value="option-1"/></label> <label for="check-2">Credit Card <input id="check-2" type="radio" name="slot-1" value="option-2"/></label>
<br> <br>
<span>Check it</span> <span>Check it</span>
</div> </div>
<a class="style--axuillary" href="/">Change</a> <a class="style--axuillary" href="/">Change</a>
</div> </div>
<div class="block"> <div class="block">
<input id="check-2" type="radio" name="slot-1" value="option-2"/> <input id="check-3" type="radio" name="slot-1" value="option-3"/>
<p style="width:100%;"> <p style="width:100%;">
<label for="check-2">Credit Card</label> <label for="check-3">Credit Card</label>
<br> <br>
<span>Check it</span> <span>Check it</span>
</p> </p>
<a class="" href="/">Change</a> <a class="" href="/">Change</a>
</div> </div>
</form> </form>
</body> </body>
</html> </html>