Генератор флажков CSS — Doodle Nerd
Генератор флажков CSS позволяет вам создавать и генерировать флажки CSS3 для вашего веб-сайта и экономит ваше время. Вы можете просмотреть флажок и скопировать или загрузить сгенерированный код CSS.
1XTEXT Опции
Padding Top (PX)
ПЛАДИНА Слева (PX)
Маржинальный дно (PX)
Размер шрифта (PX)
2 Варианты
Толщика границы (PX)
202
Цвет границы
Границы радиуса (PX)
3 -й свойства
Верх местоположения (PX)
Местоположение слева (PX)
Высота (PX)
Ширина (PX)
4 Active.
Цвет при наведении
Цвет отмеченного
Цвет отмеченного фокуса
Цвет активной границы
Цвет границы при наведении
5Свойства значка
Цвет
Положение значка сверху (пикс.)
Положение значка слева (px)
Ширина значка (px)
Высота значка (px)
Радиус (px)
Толщина (px)
Размер значка (px)
Высота строки значка ()
4 Свойства 6disabled
непрозрачность (PX)
Color
Цвет фона
Цвет границы
Цвет клеща
Цвет шрифта
7 -й эффект
Включить анимацию
Показать RIPPLE
ENABLE THE TO TO TO TO TORABLE настройки
Показать RIPPLE
ENABLE THE TO TO TO TO TO TO TO TO RIPPLE.
Ширина (em)
Высота (em)
Поле слева (em)
Верхнее поле (em)
Радиус (em)
Непрозрачность (em)
Цвет
4 Предварительный просмотр скачать
Флажок Тип 1Флажок Тип 2
Первый флажок Второй флажок Третий флажок инвалид Отключено и проверено
Красный
Желтый
Зеленый
Коричневый
Первое радио Второе радио Третье радио инвалид Отключено и проверено
Фрагмент кода CSS копировать
HTML-код копировать
Генератор флажков CSS
Минимальный CSS-фреймворк, созданный с.
.
Коллекция механизированных домкратов CSS3..
Посмотреть 5015 0 0
Простая анимация с использованием FontAwe..
Посмотреть 4539 0 0
Просмотреть все фрагменты ›
Инструменты дизайна
- Радиус границы
- Коробчатая тень
- Тень текста
- RGBA
- Начертание шрифта
- Несколько столбцов
- Изменение размера коробки
- Размеры коробки
- Контур
- Переход
- Преобразование
- Флексбокс
- Градиент
Генератор CSS3
- Фильтры CSS
- Генератор фильтров CSS
- Текстовые эффекты CSS
- Анимация CSS
CSS-эффекты
- Электронная почта для генератора изображений —
- Подпись к генератору изображений —
Средства обработки изображений
- Адаптивный калькулятор
- Тест адаптивного веб-сайта
- Генератор заданий Cron
- Ошибка генератора страниц
- Генератор любимых иконок —
- Генератор форм —
- Генератор перезаписи модов —
- Генератор доступа HTA
Инструменты веб-сайта
- Генератор кнопок начальной загрузки
- Генератор Bootstrap 4
Генератор начальной загрузки
- Переполнение (х, у)
- Изменение размера текстовой области
- Поворот текста
Генератор CSS
- Речевой пузырь
- Треугольник CSS
- Генератор всплывающих подсказок —
- Генератор ленты —
- Генератор ленточных ярлыков —
Элементы CSS
- Генератор текстовых полей
- Генератор раскрывающегося списка
- Генератор флажков
- Генератор радиокнопок
- Генератор входного диапазона —
- Генератор кнопок —
- Поворотный переключатель —
HTML-элементы управления
- Генератор макетов —
- Генератор меню CSS3 —
Генератор макетов
- Без компилятора
- Компилятор SCSS
- Компилятор SASS
- Компилятор стилуса
- Конвертер CSS в LESS
- Преобразователь CSS в SCSS
- Преобразователь CSS в стилус
Препроцессоры CSS
- Генератор шаблонов
- Дизайнер пледов
- Генератор филе
- Генератор штрих-кода
- Генератор QR-кода
- Координаты GPS
Веб-инструменты
- Возраст домена
- Поиск в Whois
- Средство просмотра метатегов
- Извлекатель ссылок
- Средство проверки неработающих ссылок
- Соотношение текста и кода
- HTML-текстовое содержимое
- Рейтинг Alexa
- Проверка заголовка HTTP
- Тест скорости веб-сайта
- IP-адрес веб-сайта
- Средство проверки связи
- Создание роботов
- Сведения о моем браузере
SEO
- Преобразователь цвета CSS
- RGBA-генератор
- Генератор цветовой палитры —
- Генератор цветовых схем
Цветные инструменты
- Преобразователь PX в EM
- Преобразование длины CSS
- Предварительный просмотр шрифта CSS
- Валидатор CSS
- Генератор спрайтов CSS —
- Формат Код CSS
- Оптимизировать код CSS —
Инструменты CSS
- Онлайн-редактор CSS —
- Редактор визуальных стилей CSS —
Редакторы CSS
Следуйте за нами
Попробуйте
http://rookienerd.
com
Социальная акция
Вам нравятся наши инструменты? Поделиться этим!
Флажки, настроенные с помощью CSS — AcceDe Web
Флажки, настроенные с помощью CSS — AcceDe WebВы находитесь здесь: Домашняя страница > Руководство AcceDe Web > Руководство по доступности основных компонентов расширенного интерфейса > Флажки, настроенные с помощью CSS
Резюме
- Принцип.
- Основная база HTML.
- База CSS.
- Демо.
- Примеры компонентов.
Принцип
Флажки — это элементы формы, которые используются для выбора одного или нескольких параметров из группы параметров.
Флажки «настраиваются с помощью CSS», когда они создаются с использованием стандартного HTML-кода для переключателей, как указано в спецификации , но стандартные переключатели визуально скрыты и заменены изображениями CSS, иконочные шрифты или определенные стили.
Есть несколько способов добиться этого. В приведенном ниже примере показано, как имитировать поведение стандартных флажков HTML по умолчанию с помощью псевдоэлементов CSS и фоновых изображений, обеспечивая при этом их доступность.
Основная база HTML
Основание CSS
метка {
положение: относительное;
заполнение: 0 0 0 2rem;
} input[type=checkbox] {
position: absolute;
непрозрачность: 0;
}
input[type=checkbox] + label::before,
input[type=checkbox] + label::after {
content: '';
позиция: абсолютная; дисплей
: встроенный блок;
}
input[type=checkbox] + label::before {
left: 0.
