Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.10.2015, 16:46
Новичок на форуме
Отправить личное сообщение для dave777 Посмотреть профиль Найти все сообщения от dave777
 
Регистрация: 11.10.2015
Сообщений: 3

Кастомные radio button
Здравствуйте!
Подскажите, как реализовать радио кнопки с таким эффектом, как на сайте http://pictoschat.com/? Это плагин Jquery?
Ответить с цитированием
  #2 (permalink)  
Старый 11.10.2015, 16:53
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

С каким эффектом? Не заметил там ничего особого.
Ответить с цитированием
  #3 (permalink)  
Старый 11.10.2015, 17:17
Новичок на форуме
Отправить личное сообщение для dave777 Посмотреть профиль Найти все сообщения от dave777
 
Регистрация: 11.10.2015
Сообщений: 3

при наведении кнопка уменьшается, когда кликаешь появляется галочка
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2015, 17:35
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

пример с checkbox (для наглядности).
Для radio аналогично.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		label {
			display: block;
			width: 25px;
			height: 25px;
			background-color: red;
			border-radius: 50%;
		}
		label:hover {
			width: 30px;
			height: 30px;
		}
		input[type="checkbox"] {
			display: none;
		}
		input[type="checkbox"]:checked + label {
			background-color: green;
		}	
	</style>
</head>
<body>
	<input type="checkbox" id="foo">
	<label for="foo"></label>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 11.10.2015, 18:25
Новичок на форуме
Отправить личное сообщение для dave777 Посмотреть профиль Найти все сообщения от dave777
 
Регистрация: 11.10.2015
Сообщений: 3

Сообщение от Lemme Посмотреть сообщение
пример с checkbox (для наглядности).
Для radio аналогично.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		label {
			display: block;
			width: 25px;
			height: 25px;
			background-color: red;
			border-radius: 50%;
		}
		label:hover {
			width: 30px;
			height: 30px;
		}
		input[type="checkbox"] {
			display: none;
		}
		input[type="checkbox"]:checked + label {
			background-color: green;
		}	
	</style>
</head>
<body>
	<input type="checkbox" id="foo">
	<label for="foo"></label>
</body>
</html>
Спасибо большое! Все понятно))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить radio button через изображение Jeick9 Events/DOM/Window 1 10.03.2015 05:57
Что делаю не так? Javascript + Radio button + Input dmonco Элементы интерфейса 3 19.05.2012 16:22
Получение значения из двух групп radio button kristalmen Элементы интерфейса 2 21.11.2011 23:13
Проблема radio button с кроссбраузерностью shkarbatov Javascript под браузер 0 28.07.2011 10:55
Помогите с radio button. Не стандартное решение dreckin Элементы интерфейса 15 01.05.2010 22:20