Как выровнять чекбокс html

Настраиваемые radio/checkbox с идеальным выравниванием в CSS

Узнайте, как создавать настраиваемые доступные radio и checkbox в CSS, которые идеально совпадают с их метками.

Создание настраиваемых radio/checkbox — непростая задача. Они должны быть доступными, легко настраиваемыми и идеально согласованными с этикетками.

HTML

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

Вот все, что нам нужно для кнопок radio и checkbox:

Структура HTML идентична той, которую мы использовали бы с собственными кнопками, за исключением того, что мы добавляем класс .radio / .checkbox к вводу.

CSS

Шаг 1 — визуально скрыть нативные кнопки:

Если вы не установите значения top / right / bottom / left для элементов абсолютной позиции, они удаляются из потока, но не перемещаются. Это важно, потому что в противном случае их положение будет непредсказуемым и может привести к прокрутке вверх страницы при нажатии кнопок.

Затем мы собираемся использовать + (соседний комбинатор-близнец) для нацеливания и стилизации меток и их псевдоэлементов ::before (настраиваемые кнопки):

 .radio + label, .checkbox + label < user-select: none; cursor: pointer; line-height: 1.4; >.radio + label::before, .checkbox + label::before < content: ''; display: inline-block; width: 18px; height: 18px; background-color: #FFF; border: 2px solid #DBDBDB; margin-right: 10px; transition: .2s; >.radio + label::before < border-radius: 50%; >.checkbox + label::before

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

Мы собираемся настроить таргетинг на проверенный статус входов и применить стиль к псевдоэлементам меток:

 .radio:checked + label::before, .checkbox:checked + label::before < background-color: #1a73e8; box-shadow: none; border-color: #1a73e8; transition: transform 0.2s; >.radio:active + label::before, .checkbox:active + label::before < transform: scale(0.8); transition: transform 0.2s; >.radio:checked:active + label::before, .checkbox:checked:active + label::before < transform: none; transition: none; >.radio:checked + label::before < background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); background-size: 10px; >.checkbox:checked + label::before < background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E"); background-size: 10px; >

Мы используем свойство background-image для добавления маркеров SVG (через URI данных). Преимущество этого метода заключается в том, что вы можете настроить толщину значка ( stroke-width = ‘2’ ) и его цвет ( stroke=’%23FFFFFF’ ) в CSS.

Что у нас есть на данный момент:

Выравнивание

А вот и самая сложная часть: совместить кнопки переключателей / флажков с их метками.

Сначала установите свойство display метки равным inline-flex и align-items равным flex-start :

 .radio + label, .checkbox + label < display: inline-flex; align-items: flex-start; line-height: 32px; >.radio + label::before, .checkbox + label::before

Таким образом, мы устранили проблему выравнивания по левому краю, видимую, когда метка разбивается на несколько строк, и мы выровняли кнопки и метки по вертикали вверху:

Чтобы выровнять кнопки и метки по вертикали, нам нужно вычислить высоту метки, которая равна размеру шрифта, умноженному на высоту строки.

Вычисленное значение font-size для метки непредсказуемо (например, мы могли бы изменить его с помощью служебных классов), но для псевдоэлемента label ::before этот font-size всегда будет равен 1em !

Зная высоту, мы можем использовать формулу для нажатия настраиваемых кнопок переключателя / флажка на очень конкретную величину, которая выравнивает их с первой строкой метки. 🤯

 .radio + label::before, .checkbox + label::before

Больше никаких случайных и непредсказуемых уловок с отрицательной маржой! 🎉

Доступность

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

Однако не забудьте включить эффект: focus (собственные кнопки не видны):

 .radio:focus + label::before, .checkbox:focus + label::before

Просмотр окончательного результата:

Источник

How to Align a Checkbox and Its Label Consistently Cross-Browsers

The checkbox is one of the HTML forms that is used on every website.

How to align the checkbox and its label? This is a question that developers frequently ask. The problem here is that when aligning them correctly in Safari using the «baseline» value of the vertical-align property, they work, but they will not work in Firefox, and developers usually waste much time on fixing this problem. If you have such difficulty, we will show how to do it step by step.

Create HTML

form> div> label> input type="checkbox" /> Label text label> div> form>

Add CSS

• Set the vertical-align property to “bottom”, which is consistent across browsers.
• Set the position property to “relative” to place the element relative to its normal position.

label < display: block; padding-left: 15px; text-indent: -15px; > input < width: 15px; height: 15px; padding: 0; margin: 0; vertical-align: bottom; position: relative; top: -1px; >

Now, let’s see the result of our code.

Example of aligning a checkbox and its label:

html> html> head> title>Title of the document title> style> label < display: block; padding-left: 15px; text-indent: -15px; > input < width: 15px; height: 15px; padding: 0; margin: 0; vertical-align: bottom; position: relative; top: -1px; > style> head> body> form> div> label> input type="checkbox" /> Label text label> div> form> body> html>

Result

In this example, we don’t need a for attribute as we wrap the in a tag.

You can adjust the relative positioning, height, width, and so on depending on the needed text sizing.

Next, we’ll show an example where we use the for attribute.

Example of aligning a checkbox and its labels using a for attribute:

html> html> head> title>Title of the document title> style> input[type=checkbox], input[type=radio] < vertical-align: middle; position: relative; bottom: 1px; > input[type=radio] < bottom: 2px; > style> head> body> form> label> input type="checkbox" /> Label text label> br/> br/> input type="checkbox" id="myChk" /> label for="myChk">label tag with the for attribute label> form> body> html>

Example of aligning a checkbox and its labels by using the display property with the «flex» value:

html> html> head> title>Title of the document title> style> label < display: flex; align-items: center; > style> head> body> form> div> label> input type="checkbox" /> Label text label> div> form> body> html>

Источник

Пользовательские radio / checkbox кнопки с выравниванием

Важное правило, которого я стараюсь придерживаться при создании компонентов — начинать с простейшей структуры и добавлять дополнительные элементы (например, родительские контейнеры) только в случае необходимости. Вот все, что нам нужно для переключателей и чек-боксов:

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Структура HTML идентична той, которую мы использовали бы с нативными кнопками, за исключением того, что мы добавляем класс .radio / .checkbox.

Шаг 1 — визуально скрыть нативные кнопки:

Если вы не установите значения top / right / bottom / left для элементов, они удаляются из потока, но не перемещаются. Это важно, потому что в противном случае их положение было бы непредсказуемым и могло бы вызвать прокрутку страницы вверх при нажатии кнопок.

Затем мы собираемся использовать селектор + для выбора и стилизации меток и их псевдо-элементов ::before (пользовательские кнопки):

На этом этапе мы можем создать некоторые пользовательские свойства CSS. Преимущество их заключается в том, что позже настройка будет намного проще, если мы решим изменить кнопки: мы можем просматривать и обновлять переменные, а не проверять весь CSS.

Мы собираемся настроить таргетинг на статус элементов checked и применить стиль к псевдо-элементам меток:

background-image : url ( «data:image/svg+xml;charset=utf8,%3Csvg xmlns=’//www.w3.org/2000/svg’ viewBox=’0 0 16 16’%3E%3Cg fill=’%23ffffff’%3E%3Ccircle cx=’8′ cy=’8′ r=’8′ fill=’%23ffffff’%3E%3C/circle%3E%3C/g%3E%3C/svg%3E» ) ;

background-image : url ( «data:image/svg+xml,%3Csvg xmlns=’//www.w3.org/2000/svg’ width=’12’ height=’12’ viewBox=’0 0 12 12’%3E%3Cpolyline points=’1 6.5 4 9.5 11 2.5′ fill=’none’ stroke=’%23FFFFFF’ stroke-linecap=’round’ stroke-linejoin=’round’ stroke-width=’2’/%3E%3C/svg%3E» ) ;

Мы используем свойство background-image для добавления маркеров SVG (через URI данных). Преимущество этого метода в том, что вы можете настроить в CSS толщину иконки (stroke-width=’2′) и ее цвет (stroke=’%23FFFFFF’). Что у нас есть на данный момент:

Выравнивание

А вот и самая сложная часть: совместить кнопки переключателей / чек-боксов с их метками. Сначала установите для свойства display метки inline-flex и для align-items — flex-start:

Таким образом, мы устранили проблему выравнивания по левому краю, видимую, когда метка разбивается на несколько строк, и мы выровняли кнопки и метки по вертикали вверху:

Чтобы выровнять кнопки и метки по вертикали, нам нужно вычислить высоту метки, которая равна размеру шрифта, умноженному на высоту строки.

Высота строки сохраняется в var(—checkbox-radio-line-height). Вычисленное значение font-size для метки непредсказуемо (например, мы могли бы изменить его с помощью служебных классов), но для псевдо-элемента label ::before этот font-size всегда будет равен 1em!

Зная высоту, мы можем использовать формулу с очень конкретной величиной, которая выравнивает их с первой строкой метки.

Источник

Выровнять чекбокс и текст

Есть форма обратной связи. В ней чекбокс и фраза «Я добровольно отправляю свои данные».
Как их выставить в одну строку?
Чекбокс должен быть в , а фраза в — требования SEOшников.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

 html lang="ru"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> link rel="stylesheet" type="text/css" href="style/style-svjazi.css"> /head> body> div class="layout3"> div class="content"> div>Описание формы:/div> div class="containerr"> h2>Форма обратной связи/h2> form id="contactForm" action="handler.php" method="post"> div class="field-block"> label for="name">Ваше имя:/label> input id="name" class="field" name="name" required type="text" placeholder="Иванов Иван Иванович"> /div> div class="field-block"> label for="email">Ваш E-mail:/label> input id="email" class="field" name="email" required type="email" placeholder="ivanov@email.com"> /div> div class="field-block"> label for="message">Текст сообщения:/label> textarea id="message" class="field" required name="message" rows="4">/textarea> /div> div class="field-block"> input id="check" name="check" checked type="checkbox"> label for="check">Я добровольно отправляю свои данные/label> /div> button id="button" class="buttonn" type="submit">Отправить/button> div class="result"> span id="answer">/span> span id="loader">img src="images/loader.gif" alt="">/span> /div> /form> /div> /div> /div>  include('footer.php'); ?> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

* { /*обнуляем все отступы*/ margin: 0; padding: 0; box-sizing: border-box; } .field-block label { margin-bottom: 10px; text-align: left; } .buttonn { height:70px; width:70%; color: #fff; text-transform: uppercase; letter-spacing: 2px; background-color: #061634; font-size: 16px; border-radius: 2px; display: inline-block; border-width: 2px; border-color: #061634; border-style: solid; } .buttonn:hover { color: #061634; background-color: #fff; } #loader { display: none; } .check-text { font-size: 14px; vertical-align: top; } .field-block textarea { resize: vertical; } .field-block .field:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .field-block .field { font-size: 16px; padding: 8px 12px; line-height: 1.5; border-radius: 2px; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .field-block label, .field-block .field { display: block; width: 100%; } h2, .field-block { margin-bottom: 20px; } .containerr { max-width: 500px; margin: 15px auto; padding: 10px; border-radius: 1px; background-color: #ebebeb; box-shadow: 0 0 3px #666; font-size: 18px; }

Источник