Кастомізація елементів форм напевно одне з найбільш захоплюючих занять в Веб-дизайні. Виправдане це заняття вирішує кожен для себе сам, хоча очевидно, що в наш час дизайнери і верстальники все ж приділяють цьому свої сили і час.
На жаль, одного тільки CSS часто мало, щоб з легкістю оформити той чи інший елемент форми. Напевно тому багато хто використовує штуки на кшталт Uniform для своїх форм. Особисто я завжди намагаюся скоротити кількість Javascript, який використовується в подібних цілях, тому хочу розповісти про абсолютно нативном HTML + CSS методі кастомізації радіо-кнопок і чекбоксів.
Упевнений, що на більшість фахівців на Хабре, застосовують схожі методи, для тих же, хто використовує js-бібліотеки, на зразок Uniform, Сподіваюся буде корисною ця стаття.
Поїхали!
Отже, відразу поставимо мету: оформити чекбокси і радіо-кнопки, щоб зовні вони були схожі на js-магію Uniform, Але зробити це максимально простим, нативним по відношенню до HTML і CSS способом, а також уникнути застосування зайвих тегів, зберігаючи семантику. Якось так.Основна ідея будується на нативном «умінні» HTML тега label встановлювати зв'язок з певним елементом форми. Власне і все, далі тільки код.
розмітка
<ul\u003e
<li\u003e
<input id \u003d "cfirst" type \u003d "checkbox" name \u003d "first" checked hidden /\u003e
<label for \u003d "cfirst"\u003eChecked checkbox</ Label\u003e
</ Li\u003e
<li\u003e
<input id \u003d "csecond" type \u003d "checkbox" name \u003d "second" hidden /\u003e
<label for \u003d "csecond"\u003eUnchecked checkbox</ Label\u003e
</ Li\u003e
<li\u003e
<input id \u003d "cthird" type \u003d "checkbox" name \u003d "third" hidden disabled /\u003e
<label for \u003d "cthird"\u003eDisabled checkbox</ Label\u003e
</ Li\u003e
<li\u003e
<input id \u003d "clast" type \u003d "checkbox" name \u003d "last" checked hidden disabled /\u003e
<label for \u003d "clast"\u003eDisabled checked checkbox</ Label\u003e
</ Li\u003e
</ Ul\u003e
<ul\u003e
<li\u003e
<input id \u003d "rfirst" type \u003d "radio" name \u003d "radio" checked hidden /\u003e
<label for \u003d "rfirst"\u003eChecked radio</ Label\u003e
</ Li\u003e
<li\u003e
<input id \u003d "rsecond" type \u003d "radio" name \u003d "radio" hidden /\u003e
<label for \u003d "rsecond"\u003eUnchecked radio</ Label\u003e
</ Li\u003e
<li\u003e
<input id \u003d "rthird" type \u003d "radio" name \u003d "radio" hidden disabled /\u003e
<label for \u003d "rthird"\u003eDisabled radio</ Label\u003e
</ Li\u003e
</ Ul\u003e
Абсолютно нативная розмітка. Використання label разом з input прям як з підручників. Важливим моментом є тільки те, що потрібно вказувати id для кожного input і for для label, Щоб зв'язати їх.
Думаю все помітили використання атрибута hidden, Який приховує самі input елементи, проте завдяки зв'язку з label, Ми все ще може маніпулювати ними. В результаті ми отримуємо щось на кшталт:
Нудно зовсім стало, але все працює. Тепер залишилося оформити все це добро як треба. Для цього скористаємося спрайтом, який застосовується на сайті Uniform.
оформлення
input [type \u003d "checkbox"],
input [type \u003d "radio"] (
display: none;
}
input [type \u003d "checkbox"] + label,
input [type \u003d "radio"] + label (
font: 18px bold;
color: # 444;
cursor: pointer;
}
input [type \u003d "checkbox"] + label:: before,
content: "";
display: inline-block;
height: 18px;
width: 18px;
margin: 0 5px 0 0;
background-image: url ( uniformjs.com/images/sprite.png) ;
background-repeat: no-repeat;
}
input [type \u003d "checkbox"] + label:: before (
background-position: -38px -260px;
}
input [type \u003d "radio"] + label:: before (
background-position: 0px -279px;
}
input [type \u003d "checkbox"]: checked + label:: before (
background-position: -114px -260px;
}
input [type \u003d "radio"]: checked + label:: before (
background-position: -108px -279px;
}
input [type \u003d "checkbox"]: disabled + label:: before (
background-position: -152px -260px;
}
input [type \u003d "checkbox"]: checked: disabled + label:: before (
background-position: -171px -260px;
}
input [type \u003d "radio"]: disabled + label:: before (
background-position: -144px -279px;
}
input [type \u003d "radio"]: checked: disabled + label:: before (
background-position: -162px -279px;
}
Тут все так само максимально просто. Використовуємо псевдо-елемент before для того, щоб показувати наші «віртуальні контроли» і користувач не помітив підміни. Частини спрайту, міняємо в залежності від стану input"А.
В результаті отримуємо щось на кшталт:
a! Чи часто Ви створюєте різні форми, опитування на своїх сайтах? Якщо так, то напевно Вам хотілося змінити стандартні елементи. У цій статті покажу як можна легко і просто замінити стандартні елементи checkbox (Прапорці) та radio button (Перемикачі) на свої. Використовувати будемо засоби тільки CSS3!
Те що вийшло подивіться і випробуйте на демо-сторінці або скачайте вихідні:
HTML розмітка
Розташуємо елементи на сторінці:
Тут нічого особливого, кожному елементу задаємо id і name, також використовуємо label для опису елементів «перемикача» і «прапорця». Всередину тега label, вставляємо span. Для чого саме, написано нижче.
Правила CSS
Зараз починається найцікавіше. Розберемо створення тільки елемента «прапорець», «перемикач» формується аналогічним шляхом. Перше що ми робимо, це приховуємо стандартний прапорець з поля зору:
input [type \u003d "checkbox"] ( |
Тепер, стає ясно, для чого потрібен елемент span. Замість прихованого стандартного прапорця організуємо новий, використовуючи span:
1 | input [type \u003d "checkbox"] + label span ( |
За допомогою CSS селектора вибираємо все span всередині тега label, які належать елементам input з типом checkbox (Тобто вибираємо все «прапорці»). І використовуємо ось такий спрайт (одне загальне зображення, замість безлічі):
Для обраних span задаємо висоту і ширину в 19px, і маємо в своєму розпорядженні фонове зображення.
Залишилося тільки організувати правило для активного «прапорця» (псевдо-селектор: checked). Для цього просто зміщуємо дане зображення вліво на 19px:
input [type \u003d "checkbox"]: checked + label span ( |
Ось таких не хитрим способом, із застосуванням декількох тактик можна організувати на сайті, елементи на свій смак. Для «перемикачів» правила шикуються подібним чином, тільки відповідно фонове зображення зміщується ще на 19px і трохи зміняться css селектор, замість type \u003d "checkbox» використовується type \u003d "radio».
Для того, щоб оформити чекбокси і радиокнопки, як того вимагає дизайн, сьогодні не обов'язково використовувати JavaScript-рішення (типу мого плагіна), тому що для цього можна задіяти тільки CSS, причому з зворотною сумісністю для старих браузерів (тобто не на шкоду юзабіліті), які не підтримують сучасні CSS-правила.
Іншими словами - в сучасних браузерах чекбокси і радиокнопки будуть виглядати красиво, відповідно до задуманого дизайном, а в старих (це відноситься до Internet Explorer версії 8 і нижче) Вони залишаться з оформленням «за замовчуванням», характерним для кожної конкретної операційної системи.
Крім того, зберігається можливість HTML5-валідації стілізуемий елементів (чого може не бути при використанні JavaScript-плагінів). В сучасних браузерах її підтримка - вже давно норма.
важливі особливості
Щоб все вийшло, важливо враховувати наступне:
- Крім, власне, самого тега елемента, який ми хочемо красиво оформити ( або ), Знадобиться тег
- тег повинен перебувати до тега
«Фокус» полягає в використанні псевдоселекторов: checked і: not. При цьому сам чекбокс або радіокнопка робляться невидимими, а їх емуляція здійснюється за допомогою псевдоелементів: before та: after для тега
Стилізація для сучасних браузерів
Розглянемо обидва варіант розташування стілізуемий елемента форми. Який з них найбільш зручний - вирішувати вам. Суть від цього не змінюється.
Теги чекбокса і радиокнопки знаходяться перед тегом
У HTML-коді це виглядає наступним чином:
Ще раз хочу загострити вашу увагу - тег обов'язково повинен бути розташований перед тегом
CSS-код для чекбокса буде таким:
Checkbox (position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px;) .checkbox + label (position: relative; padding: 0 0 0 60px; cursor: pointer;) .checkbox + label : before (content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: # CDD1DA; box-shadow: inset 0 2px 3px rgba ( 0,0,0, .2); transition: .2s;) .checkbox + label: after (content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border -radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); transition: .2s;) .checkbox: checked + label: before (background: # 9FD468;) .checkbox: checked + label: after (left: 26px;) .checkbox: focus + label: before (box-shadow: inset 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba (255,255 , 0, .7);)
CSS-код для радиокнопки буде таким:
Radio (position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px;) .radio + label (position: relative; padding: 0 0 0 35px; cursor: pointer;) .radio + label : before (content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid # CDD1DA; border-radius: 50%; background: #FFF;). radio + label: after (content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: # 9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0, .5); opacity: 0; transition: .2s;) .radio: checked + label: after (opacity: 1;) .radio: focus + label: before (box-shadow: 0 0 0 3px rgba (255,255,0, .7);)
За допомогою властивостей position, z-index і opacity для классов.checkbox і.radio ми візуально ховаємо оригінальні елементи, при цьому вони залишаються на тому ж самому місці, де будуть стилізовані елементи. А за допомогою margin трохи зміщуємо їх, щоб повідомлення валідації HTML5 виглядало гармонійно. Залежно від дизайну чекбокса і радиокнопки цей відступ можна підігнати.
Теги чекбокса і радиокнопки знаходяться всередині тега
HTML-код в даному випадку буде наступним:
За аналогією з попереднім варіантом - тег обов'язково повинен бути розташований перед тегами з классом.checkbox__text і.radio__text.
CSS-код для чекбокса буде таким:
Checkbox input (position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px;) .checkbox__text (position: relative; padding: 0 0 0 60px; cursor: pointer;) .checkbox__text: before ( content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: # CDD1DA; box-shadow: inset 0 2px 3px rgba (0,0 , 0, .2); transition: .2s;) .checkbox__text: after (content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); transition: .2s;) .checkbox input: checked + .checkbox__text: before (background: # 9FD468;) .checkbox input : checked + .checkbox__text: after (left: 26px;) .checkbox input: focus + .checkbox__text: before (box-shadow: inset 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba ( 255,255,0, .7);)
CSS-код для радиокнопки буде таким:
Radio input (position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px;) .radio__text (position: relative; padding: 0 0 0 35px; cursor: pointer;) .radio__text: before ( content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid # CDD1DA; border-radius: 50%; background: #FFF;) .radio__text: after (content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: # 9FD468; box-shadow: inset 0 1px 1px rgba (0, 0,0, .5); opacity: 0; transition: .2s;) .radio input: checked + .radio__text: after (opacity: 1;) .radio input: focus + .radio__text: before (box-shadow: 0 0 0 3px rgba (255,255,0, .7);)
Стилі тут ті ж самі, що і в попередньому способі, тільки вони застосовуються для інших селекторів.
Стилізація з урахуванням старих браузерів
CSS-код для чекбокса. У коментарях до коду я додав пояснення щодо браузерів:
/ * Cначала позначаємо стилі для IE8 і більш старих версій тобто тут ми трохи облагороджуємо стандартний чекбокс. * / .Checkbox (vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0;) / * Це для всіх браузерів, крім зовсім старих, які не підтримують селектори з плюсом. Показуємо, що label клікабелен. * / .Checkbox + label (cursor: pointer;) / * Далі йде оформлення чекбокса в сучасних браузерах, а також IE9 і вище. Завдяки тому, що старі браузери не підтримують селектори: not і: checked, в них все нижченаведені стилі не спрацюють. В даному випадку checked вказується без двокрапки попереду, чомусь це спрацьовує саме так. * / .Checkbox: not (checked) (position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px;) .checkbox: not (checked) + label (position: relative; padding: 0 0 0 60px;) .checkbox: not (checked) + label: before (content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background : # CDD1DA; box-shadow: inset 0 2px 3px rgba (0,0,0, .2); transition: .2s;) .checkbox: not (checked) + label: after (content: ""; position: absolute ; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); transition: .2s;) .checkbox: checked + label: before (background: # 9FD468;) .checkbox: checked + label: after (left: 26px;) .checkbox: focus + label: before (box-shadow: inset 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba (255,255,0, .7);)
CSS-код для радиокнопки:
Radio (vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0;) .radio + label (cursor: pointer;) .radio: not (checked) (position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px;) .radio: not (checked) + label (position: relative; padding: 0 0 0 35px;) .radio: not (checked) + label: before (content : ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid # CDD1DA; border-radius: 50%; background: #FFF;) .radio: not ( checked) + label: after (content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: # 9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0, .5); opacity: 0; transition: .2s;) .radio: checked + label: after (opacity: 1;) .radio: focus + label: before (box-shadow : 0 0 0 3px rgba (255,255,0, .7);)
приклади
Ось таким нескладним чином це і робиться. Завдяки даному способу, оформити чекбокси і радиокнопки за допомогою CSS можна так, як вам буде завгодно.
Let "s add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a element represents preformatted text which is to be presented exactly as written in the HTML file."\u003e
block to output the form data into:
Using radio inputs
We already covered the fundamentals of radio buttons above. Let "s now look at the other common radio-button-related features and techniques you may need to know about.
Selecting a radio button by default
To make a radio button selected by default, you simply include checked attribute, as shown in this revised version of the previous example:
In this case, the first radio button is now selected by default.
Note: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.
Providing a bigger hit area for your radio buttons
In the above examples, you may have noticed that you can select a radio button by clicking on its associated element represents a caption for an item in a user interface. "\u003e
Beyond accessibility, this is another good reason to properly set up
Validation
Radio buttons don "t participate in constraint validation; they have no real value to be constrained.
Styling radio inputs
The following example shows a slightly more thorough version of the example we "ve seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:
There "s not much new to note here except for the addition of element is used to group several controls as well as labels (
The CSS involved is a bit more significant:
Html (font-family: sans-serif;) div: first-of-type (display: flex; align-items: flex-start; margin-bottom: 5px;) label (margin-right: 15px; line-height: 32px;) input (-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid # 999; transition: 0.2s all linear; outline: none; margin-right: 5px; position: relative; top: 4px;) input: checked (border: 6px solid black;) button, legend (color: white; background-color: black; padding: 5px 10px ; border-radius: 0; border: 0; font-size: 14px;) button: hover, button: focus (color: # 999;) button: active (background-color: white; color: black; outline: 1px solid black;)
Most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system "s native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. Here we" ve used a border along with border-radius and a transition to create a nice animating radio selection. Notice also how the), checkbox ( ), Or option (
Compatibility note: If you wish to use the appearance property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword none does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.
Notice that when clicking on a radio button, there "sa nice, smooth fade out / in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you "d want in a real web application, but it definitely shows off the possibilities.
Specifications
| Specification | Status | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| HTML Living Standard The definition of " "In that specification. |
Living Standard | ||||||||||||
| Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | ||||||||
| type \u003d "radio" | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android? |
Legend
Full support Full support Compatibility unknown Compatibility unknownSee also
- element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "\u003e and the elements. "\u003e HTMLInputElement interface that implements it.
- or a
У минулому уроці ми вивчили поняття форми. Її основне завдання - об'єднати форми введення даних певного типу. Наприклад, форма може об'єднати дані анкети, тесту і тд. У цьому уроці ми навчимося робити самі поля введення!
За заповнення форми відповідає спеціальний тег , У нього є атрибут type, який дозволяє створити певні заповнюються поля: текстові поля, радиокнопки, прапорці, списки, кнопки. Повторюю, всі перераховані вгорі елементи доступні лише в одному тезі - .
тег в HTML
- це одиночний тег, за допомогою якого можна створювати певні елементи документа (текстові поля, радиокнопки, прапорці, списки, кнопки), які призначені для заповнення прямо на html-сторінці.нижче приклад роботи в HTML
У тега є кілька дуже важливих значень атрибутів.
name - атрибут, який слід завжди ставити для елемента, щоб обробник (скрипт) розумів, input з яким ім'ям він обробляє.
Так скрипт обробки зрозуміє, що це два різних поля.
type - даний атрибут відповідає за вказівку типу поля. Як вже говорилося раніше, при певному типі input може стати радіокнопкою, прапорцем, списком, кнопкою, текстовим поля.
size - атрибут, що вказує розмір для текстового поля, коли type вказаний як text. Зазначені дані сприймаються як ширина поля.
тег
Атрибут type для input
Тепер давайте докладніше розберемо атрибут type і його значення:text - значення атрибута вказує на те, що буде відображено звичайне текстове поле, спочатку доступне для зміни.
Атрибут value не обов'язковий, його можна взагалі не вказувати. Однак, якщо потрібно вказати значення за замовчуванням, яке буде спочатку відображатися в поле, то його слід заповнити.
password - перетворює input в поле для заповнення пароля. Відмінність від text полягає в тому, що дані, що вводяться будуть відображатися як зірочки, а після заповнення всієї форми браузер буде розуміти, що в цьому полі пароль і буде питати, чи потрібно його зберегти.
submit - подібне значення атрибута type визначає input як кнопку, при натисканні якої буде опрацьовуватися певний сценарій (що таке сценарій ви дізнаєтеся пізніше, вивчивши мови PHP і JavaScript). Кнопка використовується для того, щоб відправити дані з форм до обробника, написаного, наприклад, на вищевказаних мовах. Є й інші, але вказав найпопулярніші.
reset - це ще один вид кнопки, який обнуляє всі значення в формі. після її натискання їх потрібно буде заповнити заново.
radio - Дане значення створює радіокнопку, тобто перемикач. Використовується, як правило, для значень з невеликою кількістю варіантів. Наприклад, вибрати стать, інтервал з віком і тп. виглядає наступним чином:
У атрибута type задано значення radio - це радіокнопка. В значення value записується та фраза або слово, яке ви хочете отримати, якщо хтось вибрав певну радіокнопку і відправив дані.
Бувають і інші випадки, коли користувачеві потрібно вибрати кілька варіантів відповіді. У цьому випадку використовується вже не радіокнопка (приймає тільки один варіант), а прапорець або чекбокс.
checkbox - це поле, яке працює так само як і радіокнопка. З різницею лише в тому, що можна виділити кілька чекбоксів в якості варіантів відповіді. Також як і з радіокнопкою, якщо стосовно питання належать кілька чекбоксів, то у них атрибут name повинен бути відповідно однаково заповнений. У value відповідно буде вказано значення обраного поля.
Особливості роботи полів input
Тут пропоную розібрати деякі питання, з якими також можете столкнутmcя на початку в роботі з input.Як зробити так, щоб у користувача відразу був вибрано відповідь (чекбокс або радіокнопка)?
Для цього існує одиночний атрибут checked. Його потрібно вказати в кінці тега input. Так як атрибут одиночний, то значень у нього жодних немає. Треба лише додати його в елемент input. Наприклад, як у записі нижче:
Як зробити так, щоб навпроти чекбокса або радиокнопки був видно текст, що пояснює даний вибір?
Для цього перед і після радиокнопки або чекбокса пишемо тег
Відповідно вказуєте в тезі label, що відкриває і закриває, сам чекбокс і потрібні слова. І увага! Навіть якщо користувач натисне на слово, то чекбокс все одно буде виділено.
