Декорация радиокнопок

Developer
Ddimonn8080
Size
2,370 Kb
Views
32,384
  1. Декорация радиокнопок Previews
  2. Декорация радиокнопок HTML Codes
  3. Декорация радиокнопок CSS Codes
  4. Декорация радиокнопок JS Codes

How do I make an Декорация радиокнопок?

What is a Декорация радиокнопок? How do you make a Декорация радиокнопок? This script and codes were developed by Ddimonn8080 on 01 August 2022, Monday.

Декорация радиокнопок Previews
IQ Test

Декорация радиокнопок - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Декорация радиокнопок</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="radioButtons">	<div class="radioWrapp radioWrapp1">	<span class="showRadio"><input type="radio" name="radioSearch" class="nameParam" id="nameParam" checked></span>	<label for="nameParam">по названию</label>	</div>	<div class="radioWrapp radioWrapp2">	<span class="showRadio"><input type="radio" name="radioSearch" class="licenseParam" id="licenseParam"></span>	<label for="licenseParam">по лицензии</label>	</div>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Декорация радиокнопок - Script Codes CSS Codes

/* radioButtons */
.radioButtons {	overflow: hidden;	zoom: 1;/* ie */
}
.radioWrapp1,
.radioWrapp2 {	float: left;	padding: 10px 10px 10px 0;
}
.radioWrapp1 label,
.radioWrapp2 label {	font-size: 14px;	font-weight: 400;	line-height: 20px;	color: #222;	display: inline-block;	cursor: pointer;
}
.nameParam,
.licenseParam {	vertical-align: bottom;	margin: 0 5px 0 0;	width: 17px;	height: 17px;
}
/* decoration_________*/
.nameParam,
.licenseParam {	display: none;
}
.radioWrapp1 span,
.radioWrapp2 span {	float: left;	margin: 0 10px 0 0;	height: 22px;	width: 22px;	background: url(http://savepic.ru/8354524.png) no-repeat 0 0;
}
.radioWrapp .hoverRadio {	background-position: -23px 0;
}
.radioWrapp .checkedRadio {	background-position: -45px 0;
}
/* radioButtons End */

Декорация радиокнопок - Script Codes JS Codes

$(document).ready(function(){	var $radioWrapp = $('.radioWrapp');	$radioWrapp.each(function(){	var $radio = $(this).find('input[type=radio]');	var $span = $radio.parent('.showRadio');	if ($radio.prop('checked')) {	$span.addClass('checkedRadio');	}	}).on({mousemove: function(){	var $radio = $(this).find('input[type=radio]'),	$span = $radio.parent('.showRadio'),	hasClass = $span.hasClass('checkedRadio');	if (!hasClass) {	$span.addClass('hoverRadio');	}	}, mouseout: function(){	var $radio = $(this).find('input[type=radio]');	var $span = $radio.parent('.showRadio');	$span.removeClass('hoverRadio');	}, click: function(){	var $radio = $(this).find('input[type=radio]'),	$span = $radio.parent('.showRadio');	if ($radio.prop('checked')) {	$('.showRadio').removeClass('checkedRadio');	$span.addClass('checkedRadio');	$radioWrapp.find('input[type=radio]').prop('checked', false);	$radio.prop('checked', true);	}	}	});
});
Декорация радиокнопок - Script Codes
Декорация радиокнопок - Script Codes
Home Page Home
Developer Ddimonn8080
Username ddimonn8080
Uploaded August 01, 2022
Rating 3
Size 2,370 Kb
Views 32,384
Do you need developer help for Декорация радиокнопок?

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!

Ddimonn8080 (ddimonn8080) Script Codes
Name
Bootstrap grid sistem
A Pen by ddimonn8080
Menu
Menu icons css
Create amazing blog posts 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!