They’re basically just secret/hidden/very intensely-styled radio buttons. The example below also includes tooltips to show the “level” being selected.
How To
HTML
You can pretty much copy and paste the HTML from below into your form. You’ll need to change the names of the input fields, obviously, but depending on if you have only one or multiple sets of stars on the form, you might not need to change the for/ID.
<div class="star-group">
<fieldset>
<legend class="labelStyled">How would you rate our online banking and mobile app?</legend>
<input class="star" id="rateOnlineBankingMobileApp_veryPoor" type="radio" name="onlineBankAndAppRating" value="Very Poor" />
<label class="star" for="rateOnlineBankingMobileApp_veryPoor" data-toggle="tooltip" title="Very Poor" tabindex="0"> <span class="sr-only">Very Poor</span></label>
<input class="star" id="rateOnlineBankingMobileApp_poor" type="radio" name="onlineBankAndAppRating" value="Poor" />
<label class="star" for="rateOnlineBankingMobileApp_poor" data-toggle="tooltip" title="Poor" tabindex="0"> <span class="sr-only">Poor</span></label>
<input class="star" id="rateOnlineBankingMobileApp_avg" type="radio" name="onlineBankAndAppRating" value="Average" />
<label class="star" for="rateOnlineBankingMobileApp_avg" data-toggle="tooltip" title="Average" tabindex="0"> <span class="sr-only">Average</span></label>
<input class="star" id="rateOnlineBankingMobileApp_veryGood" type="radio" name="onlineBankAndAppRating" value="Very Good" />
<label class="star" for="rateOnlineBankingMobileApp_veryGood" data-toggle="tooltip" title="Very Good" tabindex="0"> <span class="sr-only">Very Good</span></label>
<input class="star" id="rateOnlineBankingMobileApp_excellent" type="radio" name="onlineBankAndAppRating" value="Excellent" />
<label class="star" for="rateOnlineBankingMobileApp_excellent" data-toggle="tooltip" title="Excellent" tabindex="0"> <span class="sr-only">Excellent</span></label>
</fieldset>
</div>
Script
Gulpfile
If your version uses tooltips, go into your gulpfile.js and find the place where bootstrap scripts are being pulled in. You will want to be adding the “tooltip” bootstrap plugin script. It will look something like this:
// ==========================================================
// Scripts
// ==========================================================
gulp.task('js', (done) => {
var scripts = gulp.src(['./src/scripts/lib/popper.js',
// etc...
'./src/scripts/bootstrap/tooltip.js',
'./src/scripts/plugins/*.js',
// etc....
scripts.js
First, there’s just a bit of script to be added to get the star to change color when clicked.
// Star Functionality
// ==================================================================================================================================
$('label.star').on('click', function(e) {
$(this).addClass('filled');
$(this).prevAll('label').addClass('filled');
$(this).nextAll('label').removeClass('filled');
});
Then, to get the tooltips working (assuming your stars also have tooltips), you’ll need to add a small piece of JS to your scripts file. That’s included below and does not need to be edited–it basically just makes sure everything with a tooltip atttribute actually acts like a tooltip and shows on hover.
$('[data-toggle="tooltip"]').tooltip();
Styles - forms.scss
You can add the styling for the stars. You may need to edit it a bit to change the size or color. This will not work as it is with BS2 sites, because it relies on extending an iconfont which BS2 sites don’t have. But you can adapt the basic principles.
.star-group {
display: block;
margin-bottom: 15px;
@include clearfix;
}
div.star {
float: left;
text-align: center;
margin: 0 10px;
font-size: 12px;
transition: all .3s ease-in-out;
}
div.star:before {
@extend .icon:before;
@extend .icon-star:before;
font-size: 19px;
color: #ccc;
transition: all .3s ease-in-out;
}
input.star { display: none; }
label.star {
float: left;
margin: 0 10px;
transition: all .3s ease-in-out;
}
label.star.filled:before {
color: $major;
}
label.star:hover, label.star:focus {
&:before {
color: $major;
}
}
label.star:before {
@extend .icon:before;
@extend .icon-star:before;
color: #ccc;
transition: all .2s ease-in-out;
}
Icon
The following is the SVG code for a star icon, which can be used in BS3 and BS4. Just copy and paste the script and save it as star.svg within your “iconfont-svgs” folder.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="1000px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<style type="text/css">
.st0{fill:#014D43;}
</style>
<polygon class="st0" points="997.5,388.3 653.7,338.4 500,26.8 346.3,338.4 2.5,388.3 251.2,630.8 192.5,973.2 500,811.5
807.5,973.2 748.7,630.8 "/>
</svg>
Example Sites
Tags: BS4, BS3, forms, svg, html, gulp, tooltip, scss, sass, icon