Стилизация флажков, переключателей и выпадающих меню

Ответ 1

см. эти 2 ссылки для плагинов jQuery для флажков стилей и кнопок радиосвязи:

http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

Ответ 2

Короткий ответ: вы не можете сделать это красиво и последовательно.

Ответ, который вы, возможно, захотите услышать, в зависимости от вашей ситуации: используйте jQuery или что-то подобное, что даст вам много плагинов для выберите из.

Эти два являются одними из лучших, так как это позволит вам создавать практически все элементы управления.

Ответ 3

Вы, безусловно, можете,

Checkboxes и Radio легко настраиваются с помощью css (без js). Реализация (уже упомянутая выше KunalB) предполагает скрытие ввода и использование метки (с псевдоэлементом before для пользовательского изображения) для запуска ввода

Dropdowns, с другой стороны, намного сложнее, и на сегодняшний день нет 100% чистого-css + кросс-браузерного решения... (Здесь мой ответ SO для выпадающих списков)

LIVE DEMO для всех 3: радиокнопки, флажки и выпадающие окна.

Пользовательский флажок

<div>
    <input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
    <label for="RememberMe">Remember me</label>
</div>

CSS

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] ~ label {
    display:inline;
    font-size: 18px;
}

input[type="checkbox"] ~ label:before {
    content: '';
    width: 32px;
    height: 32px;
    background: url(http://dl.dropbox.com/u/51558405/unchecked.png) no-repeat;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 3px; /*rtl*/
}

input[type="checkbox"]:checked ~ label:before {
    content: '';
    background: url(http://dl.dropbox.com/u/51558405/checked.png) no-repeat;
}

Пользовательская радио кнопка

<ul>
    <li>
        <input type="radio" id="radio1" name="radios" checked />
        <label for="radio1">Apples</label>
    </li>
    <li>
        <input type="radio" id="radio2" name="radios" />
        <label for="radio2">Pineapples </label>
    </li>
</ul>

CSS

input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    display:inline;
    font-size: 18px;
}

input[type="radio"] + label:before {
    content: '';
    display:inline-block;
    width: 32px;
    height: 32px;
    background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
    vertical-align: middle;
}

input[type="radio"]:checked + label:before {
    content: '';
    background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}

Custom Dropdown

<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->

CSS

label {
    position: relative;
    display: inline-block;
}

select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}

/* Select arrow styling */
.notIE label:after {
    content: '';
    width: 23px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 4px;
    right: 4px;
    background: url(http://www.stackoverflow.com/favicon.ico) no-repeat right center white;
    pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    .notIE label:after
    {
        display:none;
    }
}

Ответ 4

Я считаю, что CSS 3 позволит вам стилизовать эти элементы, но на данный момент это невозможно.

Посмотрите на этот вопрос: стиль ввода флажков CSS

Ответ 5

Вы можете создавать элементы формы, но трудно (невозможно?) получить согласованный стиль в браузерах и операционных системах с использованием чистого CSS-подхода. Также потребуется несколько манипуляций стилями script.

Это очень хорошая статья, в которой обсуждаются варианты и проблемы: Элементы формы стилизации

Listamatic имеет большую коллекцию стилей списка CSS.

Ответ 6

Этот парень в значительной степени обладает всем стилем, который вы можете надеть на элементы управления формой, но он не согласован между браузерами. Вам придется идти по обычаю. Используйте специальное изображение для флажка, затем измените его источник, чтобы получить нажатую версию (и наоборот). Меню выбора может быть немного сложнее. Надеюсь, там есть плагин jQuery, который может вам помочь!

Ответ 7

Вы не можете поместить изображение в качестве флажка, но вы всегда можете создать свой собственный флажок: D.

Поместите скрытое поле и изображение, добавьте событие "onclick" над изображением. Когда onclick запущен, проверьте состояние скрытого поля, измените изображение в соответствии со статусом и сохраните статус флажка в скрытом поле.

Вы должны проверить пользовательские библиотеки javascript. Одна из моих выгод - http://www.dojotoolkit.org/

Ответ 8

Скорее всего, вы не сможете, это очень сложно. Лично я бы просто держался подальше от этого.

Ответ 9

Вы можете найти мое сообщение полезным: http://kunal-b.in/2011/07/css-for-attractive-checkboxes-and-radio-buttons/.

Основная идея состоит в том, чтобы скрыть элемент формы (флажок/переключатель) и стилизовать метку вместо использования CSS. Благодаря проверенному селектору, можно различать два состояния ярлыков, назначая стили для метки и ввода: checked + label, предполагая, что метка соответствует флажку/переключателю в вашем html-коде. Использование атрибута for в коде делает полную метку щелчком мыши, изменяя состояние связанного элемента.

Ответ 10

Недавно я столкнулся с потрясающим WTF, формы? от создателя Bootstrap Отметить от. Он имеет большие стили для

• Флажок
• Радио кнопка
• Выберите
• Индикатор выполнения
• Браузер файлов

Оформить заказ http://wtfforms.com/

Ответ 11

Для этого вам не нужна библиотека. Вы можете сделать это самостоятельно с помощью чистого CSS и просто строки javascript/jquery.

Вам не нужны библиотеки. Вы можете поместить логику li'l, и вы можете сворачивать самостоятельно. Строка javascript/jquery и все CSS.

Руководство здесь - https://github.com/scazzy/CSS-FORM-UI