Как изменить стиль checkbox css

How to Style a Checkbox with CSS

A checkbox is one of the HTML forms used on every website, but mostly they are not styled and look the same. If you want to make your site more attractive, you can style the checkboxes. If you don’t know how to do that, let’s create a sample together, step by step using only CSS.

Create HTML¶

  • Use a <section> element and then add <h2> for the title.
  • Add a <div> with a class attribute.
  • Add an <input> element and specify the type , value and id attributes.
  • Add a <label> element with a for attribute.

Add CSS¶

  • Hide the checkboxes by setting the visibility property to its “hidden” value.
  • Use the :checked pseudo-class, which helps to see when the checkbox is checked.
  • Style the label with the width, height, background, margin, and border-radius properties. Set the position to "relative".
  • Style the "checkbox-example" class by setting the display to "block" and specifying the width and height properties. Then, specify the border-radius , transition, position, and other properties.
  • Now the slider is in the unchecked position. To move the slider button, we need to know whether the checkbox is checked. When it is checked, we must change the left property of the label element. We use the + combinator to select the label sibling, just next to it.

Now we will combine all these in one code and will have our checkbox ready.

Как добавить CSS стилей к checkbox при выборе?

Я хочу, чтобы флажки HTML имели определенный набор стилей CSS только тогда, когда он был выбран. E.g. изменение цвета или веса текста и т. д. Я не знаю, должен ли я использовать функцию или есть ли существующий метод, который я мог бы использовать.

Я уже прошел через эти вопросы:

6 ответов

У меня простой вопрос. У меня есть ListView, к которому я добавил элемент управления DataPager. В настоящее время DataPager — это просто числовая база. Просто интересно, можно ли добавить CSS стилей к числовым числам IE, имеющим сплошную границу 1px вокруг каждого числа ect. Любая помощь будет.

У меня есть список с checkbox элементами в нем, при выборе checkbox я хочу добавить класс к родительскому li. Как я могу этого достичь? Я новичок в Angular. <ul> <li><input type=checkbox name=fruits[] value=1>Apple</li> <li type=checkbox.

Вам не нужна никакая функция для этого, вы можете сделать это с хорошим пониманием css selectors

Вы можете попробовать:

и определите свое текстовое поле следующим образом

Вы можете управлять стилем флажков или других входных данных на основе их текущего состояния с помощью селекторов CSS, таких как этот:

В JavaScript используйте функцию, которая будет вызывать метод onclick.

Вот рабочий Jsfiddle, чтобы показать вам этот пример: https://jsfiddle.net/z4gr8wn5/

Это должно дать вам базовое представление о том, как вы должны идти вперед с выяснением того, что вам нужно выяснить.

Если вы ищете, как изменить стиль checkbox, когда пользователь нажимает, то это поможет вам https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox

Используя псевдокласс :checked css, вы сможете изменить стиль элемента без использования Javascript.

Подробнее об этом вы можете прочитать здесь .

Возможно, вы хотите переключить класс, и вот пример, если это так.

или, может быть, добавить класс к объекту, который вы щелкнули.

или, если вы действительно хотите контролировать, вы можете отправить щелкнутый объект в функцию и манипулировать им там любым удобным вам способом.

Я пытаюсь заставить свою таблицу стилей реализовать изменения в A checkbox. Я знаю, что CSS хорош, потому что, когда он был встроен, он работал как чемпион. internal_users.asp-это тот, который должен быть отформатирован, но он наследуется (подобно главной странице) от i_internal_headers.asp, где.

у меня есть флажок, и я хочу, чтобы при выборе selected/checked, значения из другого файла (то есть c_datetime.php) загружались, для этого я использовал ajax, когда я выбираю / проверяю checkbox значения загружаются правильно, но когда я снимаю его, загрузчик загружается снова, и ajax снова.

Похожие вопросы:

Я использую RequireJS для загрузки таблиц стилей в SPA, а затем динамически применяю таблицы стилей к любому представлению, которое видит пользователь. Я в значительной степени новичок в интернете.

Я хочу создать checkbox для загрузки и скрыть файл таблицы стилей CSS. Я делаю checkbox и не прикрепляю таблицу стилей к странице. Теперь, когда я проверяю, что checkbox не произошло на странице Мой.

У меня есть этот HTML, и я пытаюсь добавить границу 1px сплошного красного цвета к IMG, когда нажимается checkbox. Я уже добавляю событие Hover, но не знаю, как установить красную границу при выборе.

У меня простой вопрос. У меня есть ListView, к которому я добавил элемент управления DataPager. В настоящее время DataPager — это просто числовая база. Просто интересно, можно ли добавить CSS стилей.

У меня есть список с checkbox элементами в нем, при выборе checkbox я хочу добавить класс к родительскому li. Как я могу этого достичь? Я новичок в Angular. <ul> <li><input.

Я пытаюсь заставить свою таблицу стилей реализовать изменения в A checkbox. Я знаю, что CSS хорош, потому что, когда он был встроен, он работал как чемпион. internal_users.asp-это тот, который.

у меня есть флажок, и я хочу, чтобы при выборе selected/checked, значения из другого файла (то есть c_datetime.php) загружались, для этого я использовал ajax, когда я выбираю / проверяю checkbox.

Я создал таблицу в Web IDE, которая имеет поле ввода checkbox и по умолчанию показывает 100% при выборе checkbox. Он работал до того, как я добавил данные из json, но теперь, когда я сделал элемент.

Вот мой код <div <input type=checkbox name=users style=display: none> <label for=user0 <div>Rodolphe</div> <img.

Стилизация Checkbox

Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.

Метод «Checkbox Hack»

Стоит заменить что в некоторых старых браузерах (например Safari) такой приём не работает и требует добавление атрибутов for у <label> и id у чекбокса.

В зависимости от состояния чекбокса :checked , :disabled и :focus , следующему за ним элементу, например <span> , можно задавать стили с помощью селектора « + ».

Сам чекбокс скрывается, но без использования display: none , что бы оставить функциональность фокуса.

По умолчанию, фокус появляется при клике на элемент, что не очень и нужно. Оставить выделение при фокусе только при нажатии клавиши Tab можно с помощью JQuery, добавляя класс focused родительскому элементу.

Пример №1

В первом примере понадобятся два изображения (обычный и отмеченный), для ускорения прорисовки можно использовать спрайты, но тогда не сделать плавную смену при переключении ( transition background ).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *