Задача CSS: пользовательские радиоселекты

Я разработал довольно круто выглядящий макет формы, но понятия не имею, как заставить радио работать на нем! Ниже приведен макет формы: Образец формыЯ уже создал 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;
}

forms layout css radio-button
person Robert Klubenspies    schedule 25.04.2011    source источник
comment
Возможно, связано: stackoverflow.com/questions/5112995/   -  person Blender    schedule 25.04.2011

Ответы (3)


arrow_upward
0
arrow_downward

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< /а>

person Rudie    schedule 25.04.2011
comment
Jquery-Checkbox (в Google Code) сделал свое дело! Спасибо за наводку :) - person Robert Klubenspies; 25.04.2011
comment
Да, мне нравится этот. Очень простой JS, а все остальное можно сделать в CSS: все состояния, размер, поля и т. д. - person Rudie; 25.04.2011

arrow_upward
1
arrow_downward

Что ж, я вижу, у вас есть ответ, но я создал для вас демонстрацию jsFiddle, потому что мне нравятся такие типы задач:

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

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

Наслаждаться!

person Wesley Murch    schedule 25.04.2011
comment
Спасибо, это очень исчерпывающе. И +1 за старание! Надо будет посмотреть как реализовать :) - person Robert Klubenspies; 26.04.2011

arrow_upward
0
arrow_downward

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

Редактировать:
Я знаю, что Google больше не крут, так как есть SO, но, возможно, вы найдете эти ссылки полезными:
Как настроить пользовательский флажок
Другое настраиваемый скрипт и руководство по установке флажков

person Damb    schedule 25.04.2011
comment
Звучит как план. Это то, что я понял, но я пытался воздержаться от использования Javascript. Думаю, у меня нет выбора. И чтобы ответить на ваш вопрос, просто пара друзей. Есть ли у вас какие-либо советы по дизайну, чтобы он выглядел лучше? - person Robert Klubenspies; 25.04.2011
comment
Невозможно внести такие изменения в чистом css afaik. И мой совет по дизайну был бы просто субъективным мнением, поэтому, вероятно, не очень полезным. Но... Я бы определенно начал с добавления контраста (по крайней мере, для кнопки отправки) и настройки размеров шрифта. - person Damb; 25.04.2011
comment
Вы можете сделать стиль без JS, но тогда переключение все равно будет JS. Например, input[type="checkbox"] + span { ..unchecked.. } input[type="checkbox"]:checked + span { ..checked.. } (и скрыть входные данные) - person Rudie; 25.04.2011
comment
@Руди: Верно. Но я лично не доверяю этим «продвинутым» селекторам... потому что, скорее всего, есть браузеры (не называя ни одного: d), которым они не понравятся. Но, с другой стороны.. Я какое-то время не занимался тяжелым стилем css, так что сейчас он может работать нормально, когда ie6 мертв :) - person Damb; 25.04.2011
comment
Очень верно. Я также использую плагины jQuery. А не расширенные селекторы. IE6 и 7 уже давно для меня мертвы. IE8 даже не поддерживает все селекторы CSS2! - person Rudie; 25.04.2011