Styled radio buttons

Developer
Mike
Size
2,893 Kb
Views
4,048
  1. Styled radio buttons Previews
  2. Styled radio buttons HTML Codes
  3. Styled radio buttons CSS Codes
  4. Styled radio buttons JS Codes

How do I make an styled radio buttons?

What is a styled radio buttons? How do you make a styled radio buttons? This script and codes were developed by Mike on 01 February 2023, Wednesday.

Styled radio buttons Previews
IQ Test

Styled radio buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Styled radio buttons</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container"> <h2>Please choose preferred contact method</h2> <div class="row"> <div class="col-sm-12"> <div class="radio"> <input id="phoneRadio" name="radio" type="radio"> <label for="phoneRadio" class="css-radio">Phone</label> <input type="text" class="form-control" value="(555) 555-5555"> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="radio"> <input id="emailRadio" name="radio" type="radio"> <label for="emailRadio" class="css-radio">Email</label> <input type="text" class="form-control" value="[email protected]"> </div> </div> </div> </div> <!-- /.container -->
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Styled radio buttons - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body { font-family: 'Open Sans', sans-serif; margin: 60px 0;
}
@media (max-width: 768px) { .container { padding: 0 0 0 40px; }
}
.radio { margin: 1em;
}
.radio input[type="radio"] { position: relative; opacity: 0; top: 40px; left: -40px;
}
.radio input[type="radio"] + .css-radio:before { content: ''; background: #fff; border-radius: 50%; border: 1px solid #b3b3b3; display: inline-block; width: 2em; height: 2em; position: absolute; top: 55px; left: -15px; cursor: pointer; transition: all 200ms ease;
}
.radio input[type="radio"]:checked + .css-radio:before { background: #2899ff; box-shadow: inset 0 0 0.01em 8px #fff;
}
.form-control { height: 60px;
}
label { margin-bottom: .2em; margin-left: -15px;
}

Styled radio buttons - Script Codes JS Codes

$('input[type="text"]').click(function() { $(this).siblings('input[name="radio"]').prop("checked", true);
});
Styled radio buttons - Script Codes
Styled radio buttons - Script Codes
Home Page Home
Developer Mike
Username mikestabile
Uploaded February 01, 2023
Rating 3
Size 2,893 Kb
Views 4,048
Do you need developer help for Styled radio buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mike (mikestabile) Script Codes
Name
Business Card Sample Using jQuery Flip
Bill Pay Intro Carousel
A Pen by Mike
Bootstrap Tour Example
Scroll to top design 1
Hero with bottom banner
Scroll to top design 2
Bill Pay Banner Ad
Materialize Card
JQuery Smooth Scroll
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!