Reset CSS Stars from Javascript

Reset CSS Stars from Javascript - javascript

I have the following code, which allows a user to select a rating value and this works without issue. On the first selection, all stars are grey.
However if a user goes and rates a second thing, it doesn't retain the value but it does retain the previous number of yellow stars.
How do I reset it so no stars are yellow - I'm looking for a Javascript solution to this.
var rating = {}
function rate(value) {
rating.starValue = Number(value);
}
.stars,
.stars label::before
{
display: inline-block;
}
.stars label:hover,
.stars label:hover ~ label
{
color: #b5cebe;
}
.stars input
{
display: none;
}
.stars
{
direction: rtl;
}
.stars label
{
color: #ccc;
}
.stars label::before
{
content: "\2605";
width: 18px;
line-height: 18px;
text-align: center;
font-size: 50px;
padding: 25px;
cursor: pointer;
}
.stars input:checked ~ label
{
color: #f5b301;
}
<div class="stars">
<input type="radio" name="stars-1" id="stars-1-0" value="5" onclick="rate(this.value)"/><label for="stars-1-0"></label><!--
--><input type="radio" name="stars-1" id="stars-1-1" value="4" onclick="rate(this.value)"/><label for="stars-1-1"></label><!--
--><input type="radio" name="stars-1" id="stars-1-2" value="3" onclick="rate(this.value)"/><label for="stars-1-2"></label><!--
--><input type="radio" name="stars-1" id="stars-1-3" value="2" onclick="rate(this.value)"/><label for="stars-1-3"></label><!--
--><input type="radio" name="stars-1" id="stars-1-4" value="1" onclick="rate(this.value)"/><label for="stars-1-4"></label>
</div>
Edit: Before folks down vote this (presumably because they think I've not attempted to resolve this on my own), I've been trying to figure this out for over an hour, the primary issue I have is I can't figure out which DOM selector to use. As I've been hammering on this for over an hour, then I have no concise way of putting all the combinations that I've tried

You need to figure out how do you want to reset the radio button set i.e may be you have a reset button or you can toggle between the selected and unselected states.
Below is the code to just reset the radio buttons assuming an event for reset action.
var ratings = document.getElementsByName('stars-1');
ratings.forEach(function(element)
{
element.checked=false
})

There you go :)
querySelectorAll Link
var rating = {}
function rate(value) {
rating.starValue = Number(value);
}
function reset() {
var elements = document.querySelectorAll('.stars input[name=stars-1]');
elements.forEach(function(element) {
element.checked = false;
});
rating = {}
}
.stars,
.stars label::before
{
display: inline-block;
}
.stars label:hover,
.stars label:hover ~ label
{
color: #b5cebe;
}
.stars input
{
display: none;
}
.stars
{
direction: rtl;
}
.stars label
{
color: #ccc;
}
.stars label::before
{
content: "\2605";
width: 18px;
line-height: 18px;
text-align: center;
font-size: 50px;
padding: 25px;
cursor: pointer;
}
.stars input:checked ~ label
{
color: #f5b301;
}
<div class="stars">
<input type="radio" name="stars-1" id="stars-1-0" value="5" onclick="rate(this.value)"/><label for="stars-1-0"></label><!--
--><input type="radio" name="stars-1" id="stars-1-1" value="4" onclick="rate(this.value)"/><label for="stars-1-1"></label><!--
--><input type="radio" name="stars-1" id="stars-1-2" value="3" onclick="rate(this.value)"/><label for="stars-1-2"></label><!--
--><input type="radio" name="stars-1" id="stars-1-3" value="2" onclick="rate(this.value)"/><label for="stars-1-3"></label><!--
--><input type="radio" name="stars-1" id="stars-1-4" value="1" onclick="rate(this.value)"/><label for="stars-1-4"></label>
</div>
<input type='button' onclick='reset()' value='reset'>

Related

Hide certain inputs and show others using a switch button in jQuery

Hello Stackoverflow community, hope that you're doing well, what I'm trying to do is when I click the switch button I want it to hide certain inputs and show others, my code is a form to add students and teachers, since there are cummon inputs I tought about hide the uncummon one when I press the switch button and when I click it again do the opposite but all of that seem to be failed, I can only hide some and when I click it again it won't work, here what I did:
The Jquery code:
$(document).ready(function(){
$('.teacher').hide();
$('.switch').click(function(){
$('.student').hide();
$('.teacher').show();
});
});
The HTML code:
<label>Student </label>
<label class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</label>
<label> Teacher</label>

$('.teacher').hide();
$('.switch').click(function() {
$('.student').toggle();
$('.teacher').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='student'>Student</div>
<div class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</div>
<div class='teacher'>Teacher</div>

Use $(".teacher, .student").toggle();
Or, if needed, for more granular control you could always get the current checkbox state using
const isChecked = this.checked; // boolean`
Example:
jQuery($ => {
$(".teacher").hide();
$("#switchVal").on("input", function() {
$(".teacher, .student").toggle();
});
});
.toggler {
display: inline-flex;
gap: 0 5px;
cursor: pointer;
}
.toggler-checkbox {
display: inline-block;
width: 35px;
height: 15px;
background: #444;
border-radius: 1.2em;
}
.toggler-checkbox::before {
content: "";
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background: #0bf;
border-radius: 1em;
transition: transform 0.3s;
}
.toggler input:checked ~ .toggler-checkbox::before {
transform: translateX(20px);
}
.toggler-label {
user-select: none;
}
.toggler-label:nth-of-type(1) {
order: -1;
color: #0bf;
}
.toggler input:checked ~ .toggler-label:nth-of-type(1) {
color: inherit;
}
.toggler input:checked ~ .toggler-label:nth-of-type(2) {
color: #0bf;
}
<label class="toggler">
<input type="checkbox" id="switchVal" value="0" hidden>
<span class="toggler-checkbox"></span>
<b class="toggler-label">Student</b>
<b class="toggler-label">Teacher</b>
</label>
<ul>
<li class="student">Student: Anna</li>
<li class="student">Student: John</li>
<li class="teacher">Teacher: Mark</li>
<li class="student">Student: Tara</li>
<li class="teacher">Teacher: Zack</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

How do I run a animation on every input change?

I'm working on a animation that appears if you interact with some input elements. On a input change event, the script adds the class highlight and removes it after a delay of 1 second.
The problem is, If I switch the radio buttons faster than 1 second the animation does not work. What options do I have to run the animation on every input change?
$(':radio[name="group1"], :radio[name="group2"]').on('change', function(e) {
$('#' + this.getAttribute('name') + ' .selected').text(this.value);
});
//
// This to get the checked radios
//
$(':radio[name="group1"]:checked, :radio[name="group2"]:checked').trigger('change');
$("div").bind('DOMNodeInserted DOMNodeRemoved', function() {
$(this).addClass('highlight').delay(1000).queue(function(next){
$(this).removeClass("highlight");
next();
});
});
input{
display: none;
}
label{
display: inline-block;
width:20%;
cursor: pointer;
padding: 20px;
margin: 10px;
background: #eee;
color: #111;
}
input:checked + label{
background: #111;
color: #fff;
}
div{
background: #eee;
color: #111;
padding: 10px;
margin: 4px;
}
div span{
display: block;
margin: 4px;
}
.title{
font-weight: bold;
}
div.highlight {
-webkit-animation: highlight 1s infinite;
-moz-animation: highlight 1s;
-o-animation: highlight 1s;
animation: highlight 1s;
}
#-webkit-keyframes highlight {
from {background-color: #0099cc;}
to {background-color: none;}
}
#-moz-keyframes highlight {
from {background-color: #0099cc;}
to {background-color: none;}
}
#-o-keyframes highlight {
from {background-color: #0099cc;}
to {background-color: none;}
}
#keyframes highlight {
from {background-color: #0099cc;}
to {background-color: none;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="a" type="radio" name="group1" value="Description group1 1" checked>
<label for="a">Group1 Radio1</label>
<input id="b" type="radio" name="group1" value="Description group1 2">
<label for="b">Group1 Radio2</label>
<input id="c" type="radio" name="group1" value="Description group1 3">
<label for="c">Group1 Radio3</label>
<input id="d" type="radio" name="group2" value="Description group2 1" checked>
<label for="d">Group2 Radio1</label>
<input id="e" type="radio" name="group2" value="Description group2 2">
<label for="e">Group2 Radio2</label>
<input id="f" type="radio" name="group2" value="Description group2 3">
<label for="f">Group2 Radio3</label>
<!-- Output value here -->
<div id="group1">
<span class="title">Group1</span>
<span class="selected"></span>
</div>
<div id="group2">
<span class="title">Group2</span>
<span class="selected"></span>
</div>

Queue them in the opposite direction:
$("div").bind('DOMNodeInserted DOMNodeRemoved', function() {
$(this).removeClass('highlight').delay(10).queue(function(next) {
$(this).addClass("highlight");
next();
});
});
(and set animetion loop to once)

"X" check box with an input box

I am attempting to create a check box with an X instead of a check using an input box. However, some I want to work as a radio button (when you click one, the other's get "un-checked").
Basically, a group of three check boxes that only allows 1 box to have the check in it at a time.
Does anyone know an easy way to accomplish the radio button-esq approach to this without creating a specific function for each group of check box's?
HTML
<input name="box1" id="box1" class="checkBox" value="" readonly="readonly" onclick="return checkBox('box1')">
CSS
.checkBox { background-color:#fff; margin: 0; border: 0; padding: 0; border:1px solid #000; text-align: center; cursor: default;font-family: 'Arial Narrow', Arial, sans-serif;font-size:11px;font-weight:bold;width:1.1em;height:1.1em; }
Function
function checkBox(box) {
x = document.getElementById(box).value;
document.getElementById(box).value = (x == "X") ? "" : "X";
}

You can use custom radio buttons (css only) that looks like checkbox (Demo on jsBin and Demo on jsFiddle)
CSS:
div.radios > label > input {
visibility: hidden;
}
div.radios > label {
display: inline-block;
margin: 0 0 0 -10px;
padding: 0 0 10px 0;
height: 20px;
cursor:pointer;
}
div.radios > label > img {
display: inline-block;
padding: 0px;
height:20px;
width:20px;
background: none;
vertical-align:top;
}
div.radios > label > input:checked +img {
background: url(https://cdn2.iconfinder.com/data/icons/picons-essentials/71/no-24.png);
background-repeat: no-repeat;
background-position:center center;
background-size:20px 20px;
}
HTML:
<div class='radios'>
<label title="item1">
<input type="radio" name="foo" value="0" /> <img /> Radio One
</label>
<label title="item2">
<input type="radio" name="foo" value="1" /> <img /> Radio Two
</label>
</div>

You can give the radio group an identifier class, for instance "radio" and onclick reset them and set val of the clicked one. A jquery sample would be
<input class="checkBox radio" value="" readonly="readonly">
<input class="checkBox radio" value="" readonly="readonly">
<input class="checkBox radio" value="" readonly="readonly">
$(".radio").click(function() {
$(".radio").val('');
$(this).val('X');
});

For a pure CSS solution (that actually validates), you could use something like:
<input id="rd1" type="radio" name="opt" /><label for="rd1"></label>
<input id="rd2" type="radio" name="opt" /><label for="rd2"></label>
<input id="rd3" type="radio" name="opt" /><label for="rd3"></label>
And this is the CSS for it:
.radio-special {
display: none;
}
.radio-special + label {
background: #ddd;
height:24px;
width: 24px;
box-shadow: inset 0 0 2px 2px #aaa;
display: inline-block;
}
.radio-special:checked + label {
background: url('https://cdn1.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/20/Black_Remove.png') #ddd no-repeat 2px 2px;
}
Note that this will still look a bit weird in the html side of it, but at least its valid markup.
Check how that displays on older versions of IE. It works fine on IE10.
Fiddle

Thanks for everyone's help! I've taken everyone's advice and decided to use a custom image radio/check box through css.
This method will not work for IE7/8 because of the :checked attribute but all you need to do is use selectivizr and everything should run smoothly.
HTML
<input id="option_1" name="option1" type="radio">
<label for="option_1">Option 1</label>
<input id="option_2" name="option2" type="radio">
<label for="option_2">Option 2</label>
<input id="option_3" name="option3" type="radio">
<label for="option_3">Option 3</label>
CSS
input[type='checkbox'], input[type='radio'] { opacity: 0; float: left; width: 14px; }
input[type='radio'] + label, input[type='checkbox'] + label {
margin: 0;
margin-right:-10px; /* Position between the box+label */
clear: none;
padding: 1px 1px 1px 20px; /* Position of the box+label */
cursor: pointer;
background: url('emptyBox.png') left center no-repeat;
float:left;
}
input[type='radio']:checked + label, input[type='checkbox']:checked + label {
background-image: url('selectedBox.png');
}

How to create checkbox inside dropdown?

I want to create a multiple selection dropbox list. Actually I have to select more than one option using a dropdown menu. When I simply do this as shown bellow:
<select>
<option><input type="checkbox"></option>
</select>
Then checkbox is showing in front of dropdown field. But I want to create it for each option not for as a whole so that I can select more than option. Is there any way to do this?

Here is a simple dropdown checklist:
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
</div>

This can't be done in just HTML (with form elements into option elements).
Or you can just use a standard select multiple field.
<select multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>

I have to say in advance that I was greatly inspired by the answer of Naveen so I created my own solution based on the answer.
Following 3 functions are the basis of our multiselect:
initiazation function - detects when user clicks away in order to close the dropdown
function that detects when user clicks on dropdown to uncollapse it
function that detects checkbox click events to update the label
few improvements include:
design as in bootstrap 5
collapse when clicking away
updating the label with list of values
added Y-axis overflow with scrollbar
also I tried to stick to native JS (no jQuery) and to use as much of a native Bootstrap 5 styling as possible
here is the video:
I had no intentions to make a ready to use solution that would suit every persons' needs so please adjust it to your liking. I am personally looking forward to adding a search feature.
fiddle:
window.onload = (event) => {
initMultiselect();
};
function initMultiselect() {
checkboxStatusChange();
document.addEventListener("click", function(evt) {
var flyoutElement = document.getElementById('myMultiselect'),
targetElement = evt.target; // clicked element
do {
if (targetElement == flyoutElement) {
// This is a click inside. Do nothing, just return.
//console.log('click inside');
return;
}
// Go up the DOM
targetElement = targetElement.parentNode;
} while (targetElement);
// This is a click outside.
toggleCheckboxArea(true);
//console.log('click outside');
});
}
function checkboxStatusChange() {
var multiselect = document.getElementById("mySelectLabel");
var multiselectOption = multiselect.getElementsByTagName('option')[0];
var values = [];
var checkboxes = document.getElementById("mySelectOptions");
var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
for (const item of checkedCheckboxes) {
var checkboxValue = item.getAttribute('value');
values.push(checkboxValue);
}
var dropdownValue = "Nothing is selected";
if (values.length > 0) {
dropdownValue = values.join(', ');
}
multiselectOption.innerText = dropdownValue;
}
function toggleCheckboxArea(onlyHide = false) {
var checkboxes = document.getElementById("mySelectOptions");
var displayValue = checkboxes.style.display;
if (displayValue != "block") {
if (onlyHide == false) {
checkboxes.style.display = "block";
}
} else {
checkboxes.style.display = "none";
}
}
.multiselect {
width: 100%;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#mySelectOptions {
display: none;
border: 0.5px #7c7c7c solid;
background-color: #ffffff;
max-height: 150px;
overflow-y: scroll;
}
#mySelectOptions label {
display: block;
font-weight: normal;
display: block;
white-space: nowrap;
min-height: 1.2em;
background-color: #ffffff00;
padding: 0 2.25rem 0 .75rem;
/* padding: .375rem 2.25rem .375rem .75rem; */
}
#mySelectOptions label:hover {
background-color: #1e90ff;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="form-group col-sm-8">
<label for="dur">BS original select</label>
<select id="dur" class="form-select">
<option value="12" selected>One Year</option>
<option value="24">Two Year</option>
<option value="36">Three Year</option>
<option value="48">Four year</option>
<option value="60">Five Year</option>
</select>
</div>
<div class="form-group col-sm-8">
<label for="myMultiselect">BS custom multiselect</label>
<div id="myMultiselect" class="multiselect">
<div id="mySelectLabel" class="selectBox" onclick="toggleCheckboxArea()">
<select class="form-select">
<option>somevalue</option>
</select>
<div class="overSelect"></div>
</div>
<div id="mySelectOptions">
<label for="one"><input type="checkbox" id="one" onchange="checkboxStatusChange()" value="one" /> First checkbox</label>
<label for="two"><input type="checkbox" id="two" onchange="checkboxStatusChange()" value="two" /> Second checkbox</label>
<label for="three"><input type="checkbox" id="three" onchange="checkboxStatusChange()" value="three" /> Third checkbox</label>
<label for="four"><input type="checkbox" id="four" onchange="checkboxStatusChange()" value="four" /> Third checkbox</label>
<label for="five"><input type="checkbox" id="five" onchange="checkboxStatusChange()" value="five" /> First checkbox</label>
<label for="six"><input type="checkbox" id="six" onchange="checkboxStatusChange()" value="six" /> Second checkbox</label>
<label for="seven"><input type="checkbox" id="seven" onchange="checkboxStatusChange()" value="seven" /> Third checkbox</label>
<label for="eight"><input type="checkbox" id="eight" onchange="checkboxStatusChange()" value="eight" /> First checkbox</label>
<label for="nine"><input type="checkbox" id="nine" onchange="checkboxStatusChange()" value="nine" /> Second checkbox</label>
<label for="ten"><input type="checkbox" id="ten" onchange="checkboxStatusChange()" value="ten" /> Third checkbox</label>
</div>
</div>
</div>
</div>

You can always use multiple or multiple = "true" option with a select tag, but there is one jquery plugin which makes it more beautiful. It is called chosen and can be found here.
This fiddle-example might help you to get started
Thank you.

Very simple code with Bootstrap and JQuery without any additional javascript code :
HTML :
.dropdown-menu label {
display: block;
}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<form class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<label class="dropdown-item"><input type="checkbox" name="" value="one">First checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="two">Second checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="three">Third checkbox</label>
</form>
</div>
https://codepen.io/funkycram/pen/joVYBv

Multiple drop downs with checkbox's and jQuery.
jQuery(function($) {
var checkList = $('.dropdown-check-list');
checkList.on('click', 'span.anchor', function(event) {
var element = $(this).parent();
if (element.hasClass('visible')) {
element.removeClass('visible');
} else {
element.addClass('visible');
}
});
});
.dropdown-check-list {
display: inline-block;
width: 100%;
}
.dropdown-check-list:focus {
outline: 0;
}
.dropdown-check-list .anchor {
width: 98%;
position: relative;
cursor: pointer;
display: inline-block;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
border: 1px #ccc solid;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list3" class="dropdown-check-list" tabindex="100">
<span class="anchor">Which development(s) are you interested in?</span>
<ul class="items">
<li><input id="answers_2529_the-lawns" name="answers[2529][answers][]" type="checkbox" value="The Lawns" /><label for="answers_2529_the-lawns">The Lawns</label></li>
<li><input id="answers_2529_the-residence" name="answers[2529][answers][]" type="checkbox" value="The Residence" /><label for="answers_2529_the-residence">The Residence</label></li>
</ul>
</div>

Simply use bootstrap-multiselect where you can populate dropdown with multiselect option and many more feaatures.
For doc and tutorials you may visit below link
https://www.npmjs.com/package/bootstrap-multiselect
http://davidstutz.de/bootstrap-multiselect/

Can you style an html radio button to look like a checkbox?

I have an html form that a user will fill out and print. Once printed, these forms will be faxed or mailed to a government agency, and need to look close enough like the original form published by said agency that a government bureaucrat doesn't spot that this is a reproduction. The data entered in the form is not saved anywhere or even submitted back to a web server. All that matters is that our users can easily find these forms on our intranet site and type into the form for printing with their normal keyboard.
On the screen I want to leave the radio button as-is, to enforce and communicate radio button usage (choose only one option). However, when it prints out I need it to print with the square checkbox style rather than the round radio button style. I know how to use a media selector to set styles for print only, so that's not the issue. It's just that I don't know if I can style the radio button like I want at all.
If I can't get this working I'm gonna have to create a checkbox to shadow each radio button, use javascript to keep the checkboxes and radio buttons in sync, and css to show the one I care about in the proper medium. Obviously if I can just style them it would save a lot of work.

Three years after this question is posted and this is almost within reach. In fact, it's completely achievable in Firefox 1+, Chrome 1+, Safari 3+ and Opera 15+ using the CSS3 appearance property.
The result is radio elements that look like checkboxes:
input[type="radio"] {
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */
-moz-appearance: checkbox; /* Firefox */
-ms-appearance: checkbox; /* not currently supported */
}
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
jsfiddle: http://jsfiddle.net/mq8Zq/
Note: this was eventually dropped from the CSS3 specification due to a lack of support and conformance from vendors. I'd recommend against implementing it unless you only need to support Webkit or Gecko based browsers.

This is my solution using only CSS (Jsfiddle: http://jsfiddle.net/xykPT/).
div.options > label > input {
visibility: hidden;
}
div.options > label {
display: block;
margin: 0 0 0 -10px;
padding: 0 0 20px 0;
height: 20px;
width: 150px;
}
div.options > label > img {
display: inline-block;
padding: 0px;
height:30px;
width:30px;
background: none;
}
div.options > label > input:checked +img {
background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
background-repeat: no-repeat;
background-position:center center;
background-size:30px 30px;
}
<div class="options">
<label title="item1">
<input type="radio" name="foo" value="0" />
Item 1
<img />
</label>
<label title="item2">
<input type="radio" name="foo" value="1" />
Item 2
<img />
</label>
<label title="item3">
<input type="radio" name="foo" value="2" />
Item 3
<img />
</label>
</div>

In CSS3:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
In reality:
<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>
#media screen {.fakecheckbox img {display:none}}
#media print {.fakecheckbox input {display:none;}}
and you'll need Javascript to keep <img> and radios in sync (and ideally insert them there in a first place).
I've used <img>, because browsers are usually configured not to print background-image. It's better to use image than another control, because image is non-interactive and less likely to cause problems.

Pure Vanilla CSS / HTML solution in 2021. It uses the CSS appearance: none; property.
Seems to be compatible with all major browsers at this time:
https://caniuse.com/?search=appearance%3A%20none
input[type="radio"]{
appearance: none;
border: 1px solid #d3d3d3;
width: 30px;
height: 30px;
content: none;
outline: none;
margin: 0;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
input[type="radio"]:checked {
appearance: none;
outline: none;
padding: 0;
content: none;
border: none;
}
input[type="radio"]:checked::before{
position: absolute;
color: green !important;
content: "\00A0\2713\00A0" !important;
border: 1px solid #d3d3d3;
font-weight: bolder;
font-size: 21px;
}
<input type="radio" name="radio" checked>
<input type="radio" name="radio">
<input type="radio" name="radio">

Yes it can be done using this css, i've hidden the default radio button and made a custom radio button that looks like a checkbox.
Working Perfect in 2022.
.css-prp
{
color: #17CBF2;
font-family: arial;
}
.con1 {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.con1 input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: lightgrey;
border-radius: 10%;
}
/* When the radio button is checked, add a blue background */
.con1 input:checked ~ .checkmark {
background-color: #17CBF2;
}
<label class="con1"><span>Yes</span>
<input type="radio" name="radio1" checked>
<span class="checkmark"></span>
</label>
<label class="con1"><span>No</span>
<input type="radio" name="radio1">
<span class="checkmark"></span>
</label>

I tweaked user2314737's answer to use font awesome for the icon. For those unfamiliar with fa, one significant benefit over img's is the vector based rendering inherent to fonts. I.e. no image jaggies at any zoom level.
jsFiddle
Result
div.checkRadioContainer > label > input {
visibility: hidden;
}
div.checkRadioContainer {
max-width: 10em;
}
div.checkRadioContainer > label {
display: block;
border: 2px solid grey;
margin-bottom: -2px;
cursor: pointer;
}
div.checkRadioContainer > label:hover {
background-color: AliceBlue;
}
div.checkRadioContainer > label > span {
display: inline-block;
vertical-align: top;
line-height: 2em;
}
div.checkRadioContainer > label > input + i {
visibility: hidden;
color: green;
margin-left: -0.5em;
margin-right: 0.2em;
}
div.checkRadioContainer > label > input:checked + i {
visibility: visible;
}
<div class="checkRadioContainer">
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 1</span>
</label>
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 2</span>
</label>
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 3</span>
</label>
</div>

You can hide de default radio appareance and then draw the check with clip-path in the pseudo-element, no javascript needed.
label{
display: block;
margin-bottom: 10px;
}
input[type=radio] {
appearance: none;
background-color: #fff;
width: 15px;
height: 15px;
border: 2px solid #ccc;
border-radius: 2px;
display: inline-grid;
place-content: center;
}
input[type=radio]::before {
content: "";
width: 10px;
height: 10px;
transform: scale(0);
transform-origin: bottom left;
background-color: #fff;
clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
}
input[type=radio]:checked::before {
transform: scale(1);
}
input[type=radio]:checked{
background-color: #0075FF;
border: 2px solid #0075FF;
}
<label>
<input type="radio" name="fruit"> Apple
</label>
<label>
<input type="radio" name="fruit"> Banana
</label>
<label>
<input type="radio" name="fruit"> Orange
</label>
<label>
<input type="radio" name="fruit"> Avocado
</label>

Simple and neat with fontawesome
input[type=radio] {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
outline: none;
content: none;
margin-left: 5px;
}
input[type=radio]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 25px;
color: transparent !important;
background: #fff;
width: 25px;
height: 25px;
border: 2px solid black;
margin-right: 5px;
}
input[type=radio]:checked:before {
color: black !important;
}

appearance property doesn't work in all browser. You can do like the following-
input[type="radio"]{
display: none;
}
label:before{
content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
}
input[type="radio"]:checked+label:before{
content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
}
<input type="radio" name="gender" id="test1" value="male">
<label for="test1"> check 1</label>
<input type="radio" name="gender" value="female" id="test2">
<label for="test2"> check 2</label>
<input type="radio" name="gender" value="other" id="test3">
<label for="test3"> check 3</label>
It works IE 8+ and other browsers

I don't think you can make a control look like anything other than a control with CSS.
Your best bet it to make a PRINT button goes to a new page with a graphic in place of the selected radio button, then do a window.print() from there.

Yes, CSS can do this:
input[type=checkbox] {
display: none;
}
input[type=checkbox] + *:before {
content: "";
display: inline-block;
margin: 0 0.4em;
/* Make some horizontal space. */
width: .6em;
height: .6em;
border-radius: 0.6em;
box-shadow: 0px 0px 0px .5px #888
/* An outer circle. */
;
/* No inner circle. */
background-color: #ddd;
/* Inner color. */
}
input[type=checkbox]:checked + *:before {
box-shadow: 0px 0px 0px .5px #888
/* An outer circle. */
, inset 0px 0px 0px .14em #ddd;
/* An inner circle with above inner color.*/
background-color: #444;
/* The dot color */
}
<div>
<input id="check1" type="checkbox" name="check" value="check1" checked>
<label for="check1">Fake Checkbox1</label>
</div>
<div>
<input id="check2" type="checkbox" name="check" value="check2">
<label for="check2">Fake Checkbox2</label>
</div>
<div>
<input id="check2" type="radio" name="check" value="radio1" checked>
<label for="check2">Real Checkbox1</label>
</div>
<div>
<input id="check2" type="radio" name="check" value="radio2">
<label for="check2">Real Checkbox2</label>
</div>

Simple but optimal solution.
.custom-radio[type="radio"]{
appearance: none;
border: 1px solid #d3d3d3;
width: 18px;
height: 18px;
content: none;
outline: none;
border-radius:100%;
margin: 0;
}
.custom-radio[type="radio"]:checked {
appearance: none;
border-radius:100%;
outline: none;
padding: 0;
content: none;
border: none;
}
.custom-radio[type="radio"]:checked::before{
position: absolute;
background:#0c1332 ;
accent-color:blue;
border-radius:100%;
color: white !important;
content: "\00A0\2713\00A0" !important;
border: 1px solid #d3d3d3;
font-weight: bolder;
font-size: 13px;
}
<p>Please select your favorite Web language:</p>
<input type="radio" id="html" class="custom-radio" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" class="custom-radio" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" class="custom-radio" value="JavaScript">
<label for="javascript">JavaScript</label>

So I have been lurking on stack for so many years. This is actually my first time posting on here.
Anyhow, this might seem insane but I came across this post while struggling with the same issue and came up with a dirty solution. I know there are more elegant ways to perhaps set this as a property value but:
if you look at lines 12880-12883 in tcpdf.php :
$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`110`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n'][$onvalue] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`110`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`111`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
and lines 13135-13138 :
$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`108`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n']['Yes'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`108`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`109`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
Those widgets are rendered from the zapfdingbats font set... just swap the character codes and voila... checks are radios and/or vice versa. This also opens up ideas to make a custom font set to use here and add some nice styling to your form elements.
Anyhow, just figured I would offer my two cents ... it worked awesome for me.

It can be also like this:
input[type="radio"] {
border-radius: 50%;
width: 24px;
height: 24px;
}
input[type="radio"]:checked {
background: #d8046e url("../img/check.svg") center center no-repeat;
}

Very simple idea using a table and no Javascript.
Am I being too simplistic?
<style type="text/css" media="screen">
#ageBox {display: none;}
</style>
<style type="text/css" media="print">
#ageButton {display: none;}
</style>
<tr><td>Age:</td>
<td id="ageButton">
<input type="radio" name="userAge" value="18-24">18-24
<input type="radio" name="userAge" value="25-34">25-34
<td id="ageBox">
<input type="checkbox">18-24
<input type="checkbox">25-34
</td></tr>

Develop Reference

JavaScript is the programming language of the Web.

Reset CSS Stars from Javascript - javascript

Related

Hide certain inputs and show others using a switch button in jQuery

How do I run a animation on every input change?

"X" check box with an input box

How to create checkbox inside dropdown?

Can you style an html radio button to look like a checkbox?

Categories

Resources