CSS Challenge: выбор собственного радио - PullRequest
Новая
       9

CSS Challenge: выбор собственного радио

2 голосов
/ 25 апреля 2011

Я разработал довольно классно выглядящую форму, но понятия не имею, как заставить работать на ней радио! Ниже приведен макет формы: Sample of Form Я уже создал CSS для ввода текста (и приложу его ниже для тех, кто ищет что-то подобное). Что мне теперь нужно выяснить, так это «Какой сервис вы ищете?» раздел. Я написал CSS для синей рамки, но теперь мне нужно выяснить, как превратить «Консалтинг, веб-разработка и графический дизайн» в радио-выбор, где тот, с галочкой рядом с ним, является выбранным радио-блоком. Путь над моей головой. Я все еще пытаюсь выяснить это и опубликую здесь, если я сделаю; просто ищу информацию о том, как бы вы написали эти радиостанции.

Текущий код для ввода текста: 

input[type=text] {
     width: 365px;
     height: 54px;
     margin: 0 0 12px 0;
     padding: 0 0 0 25px;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     background: #a2bdd8;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #76899d), color-stop(0.075, #a2bdd8));
     color: #fff;
     font-size: 30px;
     border: none;
}
*:focus { outline: none; }

Текущий код для фона "Какой сервис вы ищете?": 

#options {
     width: 270px;
     height: 120px;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     background: #a2bdd8;
}

Ответы [ 3 ]

1 голос
/ 25 апреля 2011

Хорошо, я вижу, что вы получили ответ, но я построил вам демо jsFiddle, потому что мне нравятся следующие типы задач:

http://jsfiddle.net/Madmartigan/VkTZa/1/

Использует jQuery (не мог придуматьчистое css хорошее решение).Может быть, это немного проще, чем использовать плагин?

Наслаждайтесь!

0 голосов
/ 25 апреля 2011

jQuery имеет несколько плагинов для радио / чекбоксов. Мне нравится тот, который используется на http://webscale.cms.ezcompany.nl/scan

<script src="/files/jquery.checkbox.min.js"></script>
<link rel="stylesheet" href="/files/jquery.checkbox.css" />
<script>
$('input[type=radio]').checkbox({empty: '/files/empty.png'});
</script>

Список плагинов на jquery.com: http://plugins.jquery.com/plugin-tags/checkbox

0 голосов
/ 25 апреля 2011

Вам нужно будет создать изображения и заменить свои флажки на эти изображения.Затем поменяйте их с помощью javascript, когда флажок установлен1005 * Пользовательский флажок, инструкция
Еще один настраиваемый сценарий и учебник флажок

...