Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to CSS3
Preview Source Code
Download
HTML
CSS
/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box;}
/**Typeo CSS End**/
.radio-list-main{ font-family: Poppins; width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background-color: #f3f3f3;
    border: #ccc 1px solid;}
.radio-list {width: 100%;display: flex;
    flex-flow: row wrap;
    align-items: center;}
.radio-list .radio-item {
	position: relative; 
	margin: 5px;
}
.radio-list input[type="radio"]{ 
	opacity: 0; 
	cursor: pointer; 
	position: absolute; 
	top: 6px; 
	left: 7px;
}
.custom-radio{
	min-height: 28px; 
	display: flex;
	align-items: center; 
	flex-flow: row wrap; 
	padding:8px 15px;
	border: #000 2px solid; 
	position: relative; 
	cursor:pointer;

}
.radio-list input:checked~.custom-radio { 
	border-color:#59b259;  
	background-color: #59b259; 
	color:#fff;
}

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *