Оформление css формы: Стилизуем формы при помощи CSS: руководство для начинающих

Стили HTML форм — Изучение веб-разработки

В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!

На заре Интернета, примерно в 1995 году, в HTML 2 были добавлены элементы управления формой. Из-за сложности виджетов форм разработчики решили полагаться на базовую операционную систему для управления ими и их рендеринга.

Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.

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

Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации HTML форм.

Не все виджеты созданы равными, когда задействован CSS

В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:

Хорошая

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

1. <form>
2. <fieldset>
3. <label>
4. <output>

Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.

Плохая

Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углублённых знаний CSS3.

Они включают в себя элемент <legend>, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент placeholder не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.

Мы опишем, как обрабатывать эти более конкретные случаи, в статье «Расширенные стили для HTML-форм».

The ugly

Some elements simply can’t be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including <select>, <option>, <optgroup> and <datalist> elements. The file picker widget is also known not to be stylable at all. The new <progress> and <meter> elements also fall in this category.

The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you’ll be able to style. We explore how to do this in the article How to build custom form widgets.

To style elements that are easy to style with CSS, you shouldn’t face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.

Search fields

Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you’ll have to tweak it with the -webkit-appearance proprietary property. We discuss this property further in the article: Advanced styling for HTML forms.

Example

<form>
  <input type="search">
</form>

input[type=search] {
  border: 1px dotted #999;
  border-radius: 0;

  -webkit-appearance: none;
}

As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the -webkit-appearance property, whereas the second is rendered using -webkit-appearance:none. This difference is noticeable.

Fonts and text

CSS font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets). However, browsers’ behaviors are often inconsistent. By default, some widgets do not inherit font-family and font-size from their parents. Many browsers use the system default appearance instead. To make your forms’ appearance consistent with the rest of your content, you can add the following rules to your stylesheet:

button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform’s default font style in use. On the right are the same elements, with our font harmonization style rules applied.

There’s a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.

Box model

All text fields have complete support for every property related to the CSS box model (width, height, padding, margin, and border). As before, however, browsers rely on the system default styles when displaying these widgets. It’s up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you’ll face a little difficulty if you want to give them a consistent size.

This is because each widget has their own rules for border, padding and margin. So if you want to give the same size to several different widgets, you have to use the box-sizing property:

input, textarea, select, button {
  width : 150px;
  margin: 0;

  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box;
}

In the screenshot above, the left column is built without box-sizing, while the right column uses this property with the value border-box. Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform’s default rules for each kind of widget.

Positioning

Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:

legend

The <legend> element is okay to style, except for positioning. In every browser, the <legend> element is positioned on top of the top border of its <fieldset> parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the position property. But otherwise it is part of the fieldset border.

Because the <legend> element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it’s quite often paired with a title, and then hidden in an accessible way. For example:

HTML

<fieldset>
  <legend>Hi!</legend>
  <h2>Hello</h2>
</fieldset>

CSS

legend {
  width: 1px;
  height: 1px;
  overflow: hidden;
}

textarea

By default, all browsers consider the <textarea> (en-US) element to be an inline block, aligned to the text bottom line. This is rarely what we actually want to see. To change from inline-block to block, it’s pretty easy to use the display property. But if you want to use it inline, it’s common to change the vertical alignment:

textarea {
  vertical-align: top;
}

Let’s look at a concrete example of how to style an HTML form. This will help make a lot of these ideas clearer. We will build the following «postcard» contact form:

If you want to follow along with this example, make a local copy of our postcard-start.html file, and follow the below instructions.

The HTML

The HTML is only slightly more involved than the example we used in the first article of this guide; it just has a few extra IDs and a title.

<form>
  <h2>to: Mozilla</h2>

  <div>
    <label for="name">from:</label>
    <input type="text" name="user_name">
  </div>

  <div>
    <label for="mail">reply:</label>
    <input type="email" name="user_email">
  </div>

  <div>
    <label for="msg">Your message:</label>
    <textarea name="user_message"></textarea>
  </div>

  <div>
    <button type="submit">Send your message</button>
  </div>
</form>

Add the above code into the body of your HTML.

Organizing your assets

This is where the fun begins! Before we start coding, we need three additional assets:

1. The postcard background — download this image and save it in the same directory as your working HTML file.
2. A typewriter font: The «Secret Typewriter» font from fontsquirrel.com — download the TTF file into the same directory as above.
3. A handdrawn font: The «Journal» font from fontsquirrel.com — download the TTF file into the same directory as above.

Your fonts need some more processing before you start:

1. Go to the fontsquirrel Webfont Generator.
2. Using the form, upload both your font files and generate a webfont kit. Download the kit to your computer.
3. Unzip the provided zip file.
4. Inside the unzipped contents you will find two .woff files and two .woff2 files. Copy these four files into a directory called fonts, in the same directory as before. We are using two different files for each font to maximise browser compatibility; see our Web fonts article for a lot more information.

The CSS

Now we can dig into the CSS for the example. Add all the code blocks shown below inside the <style> element, one after another.

First, we prepare the ground by defining our @font-face rules, all the basics on the <body> element, and the <form> element:

@font-face {
    font-family: 'handwriting';
    src: url('fonts/journal-webfont.woff2') format('woff2'),
         url('fonts/journal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'typewriter';
    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
         url('fonts/veteran_typewriter-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  font  : 21px sans-serif;

  padding : 2em;
  margin  : 0;

  background : #222;
}

form {
  position: relative;

  width  : 740px;
  height : 498px;
  margin : 0 auto;

  background: #FFF url(background.jpg);
}

Now we can position our elements, including the title and all the form elements:

h2 {
  position : absolute;
  left : 415px;
  top  : 185px;

  font : 1em "typewriter", sans-serif;
}

#from {
  position: absolute;
  left : 398px;
  top  : 235px;
}

#reply {
  position: absolute;
  left : 390px;
  top  : 285px;
}

#message {
  position: absolute;
  left : 20px;
  top  : 70px;
}

That’s where we start working on the form elements themselves. First, let’s ensure that the <label>s are given the right font:

label {
  font : .8em "typewriter", sans-serif;
}

The text fields require some common rules. Simply put, we remove their borders and backgrounds, and redefine their padding and margin:

input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;

  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 240px;

  background: none;
}

When one of these fields gains focus, we highlight them with a light grey, transparent, background. Note that it’s important to add the outline (en-US) property, in order to remove the default focus highlight added by some browsers:

input:focus, textarea:focus {
  background   : rgba(0,0,0,.1);
  border-radius: 5px;
  outline      : none;
}

Now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won’t typically look the same using the defaults.

The single-line text field needs some tweaks to render nicely in Internet Explorer. Internet Explorer does not define the height of the fields based on the natural height of the font (which is the behavior of all other browsers). To fix this, we need to add an explicit height to the field, as follows:

input {
    height: 2.5em; 
    vertical-align: middle; 
}

<textarea> (en-US) elements default to being rendered as a block element. The two important things here are the resize (en-US) and overflow properties. Because our design is a fixed-size design, we will use the resize property to prevent users from resizing our multi-line text field. The overflow property is used to make the field render more consistently across browsers. Some browsers default to the value auto, while some default to the value scroll. In our case, it’s better to be sure every one will use auto:

textarea {
  display : block;

  padding : 10px;
  margin  : 10px 0 0 -10px;
  width   : 340px;
  height  : 360px;

  resize  : none;
  overflow: auto;
}

The <button> element is really convenient with CSS; you can do whatever you want, even using pseudo-elements:

button {
  position     : absolute;
  left         : 440px;
  top          : 360px;

  padding      : 5px;

  font         : bold .6em sans-serif;
  border       : 2px solid #333;
  border-radius: 5px;
  background   : none;

  cursor       : pointer;

-webkit-transform: rotate(-1.5deg);
   -moz-transform: rotate(-1.5deg);
    -ms-transform: rotate(-1.5deg);
     -o-transform: rotate(-1.5deg);
        transform: rotate(-1.5deg);
}

button:after {
  content: " >>>";
}

button:hover,
button:focus {
  outline   : none;
  background: #000;
  color   : #FFF;
}

And voila!

Note: If your example does not work quite like you expected and you want to check it against our version, you can find it on GitHub — see it running live (also see the source code).

As you can see, as long as we want to build forms with just text fields and buttons, it’s easy to style them using CSS. If you want to know more of the little CSS tricks that can make your life easier when working with form widgets, take a look at the form part of the normalize.css project.

In the next article, we will see how to handle form widgets which fall in the «bad» and «ugly» categories.

Обзор форм HTML5 : CSS

Вторая статья из цикла статей о формах HTML5 (всего их 3) посвящена стилевому оформлению, а если конкретнее – селекторам псевдоклассов, которые вы можете использовать для представления полей ввода в различных видах. Если вы об этом еще не читали, перейдите к первой статье из цикла, чтобы иметь представление об основных понятиях разметки.

Продолжение: Разметка форм в HTML5 (первая статья)
Продолжение: Формы HTML5: Java Script и проверка с Constraint Validation API (третья статья)

Отмена стилевого оформления по умолчанию

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

Для того чтобы отменить стилевое оформление по умолчанию, используется свойство appearance: none;, требующее постановки префиксов. Вместе с тем использовать его нужно очень осторожно, поскольку оно может удалить важные элементы стиля – в браузере Chrome после этой операции удаляются флажки и переключатели. Чтобы подобного не случилось, используйте данное свойство только когда требуется, а также проверяйте его в остальных доступных браузерах, например:

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      appearance: none;
      outline: 0;
      box-shadow: none;
    }

Обратите внимание, что я также отменил значения свойств outline и box-shadow, чтобы убрать неуместную голубую тень вокруг выбранного элемента и неправильное оформление стилей во всех браузерах.

Значения свойства appearance записаны на CSS-Tricks, но они постоянно меняются.

:focus

Псевдокласс :focus поддерживается еще со времени CSS2.1 и устанавливает стилевое оформление выбранного элемента, например:

    input:focus,
    textarea:focus,
    select:focus {
      background-color: #eef;
    }

:checked

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

    <input type="checkbox" name="test" />
    <label for="test">check me</label>

    input:checked ~ label {
        font-weight: bold;
    }

Соответствующего псевдокласса ‘unchecked’ нет, но в нем и нет необходимости: просто создайте стилевое оформление по умолчанию, а потом примените изменения, когда будет активирован селектор :checked. Как альтернативный вариант вы можете использовать значение :not ( :checked).

:indeterminate

В техническом отношении псевдокласса :indeterminate еще нет в спецификации, хотя он там и упоминается. В соответствии со спецификацией, он представляет флажки или переключатели, которые «и отмечены, и не отмечены».

Его необычность заключается в том, что он применяет стилевое оформление только тогда, когда вы определяете свойство .indeterminate для флажка через JavaScript, т.е.

    document.getElementById("mycheckbox").indeterminate = true;

Он не работает со свойством .checked, поскольку оно может иметь только значения true или false.

Псевдокласс :indeterminate может пригодиться в нескольких случаях. При наличии списка флажков вы можете создать флажок «выбрать все», который выделяет или отменяет выделение всех пунктов по клику. При этом, если вы выберете только некоторые пункты из списка, флажок «выбрать все» может принять неопределенное состояние.

:required

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

:optional

Класс :optional устанавливает стили для любого поля ввода, которое не обладает атрибутом required. Не совсем понятно, зачем он добавлен, поскольку при использовании класса :not (:required) можно получить тот же результат.

:valid

Класс :valid устанавливает стили для любого поля ввода, которое содержит действительные данные.

:invalid

Если провести аналогию, :invalid (или :not (:valid)) устанавливает стили для любого вводимого значения, которое содержит недопустимые данные. Например:

    input:invalid {
        border-color: #900;
    }

In-range (ввод чисел и определение диапазона)

Числа и диапазоны чисел, содержащие действительное значение, входящее в диапазон, установленный атрибутами min и max, и подходящее к значению step, могут быть установлены с помощью класса :in-range. Конечно, вряд ли слайдер будет иметь значение вне диапазона, но все-таки..

:out-of-range (ввод чисел и определение диапазона)

Класс :out-of-range устанавливает недопустимые числовые значения для диапазона вводимых значений.

:disabled

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

    input:disabled {
        color: #ccc;
        background-color: #eee;
    }

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

:enabled

Как можно догадаться, стилевое оформление незаблокированных полей может быть определено с помощью классов :enabled (или :not (:disabled)). В реальности вам этот селектор может понадобиться с малой долей вероятности, поскольку он представляет стилизацию полей ввода по умолчанию.

:read-only

Вводимые значении с атрибутом read-only могут быть установлены с помощью псевдокласса :read-only. Имейте в виду, что вводимые значения, которые предназначены только для чтения, в любом случае будут проверены и отправлены на сервер, но у пользователя нет полномочий изменить их.

:read-write

Типичные поля, которые можно редактировать, могут быть установлены с помощью псевдокласса :read-write (или :not ( :read-only)). Данный селектор вам также часто не понадобится.

:default (только для кнопок отправки запроса или полей ввода)

И, самый последний – это селектор :default, который изменяет стиль кнопки отправки запроса, установленный по умолчанию.

Стилевое оформление текста, вводимого в поле заполнения

Текст атрибута placeholder может быть стилизован при помощи псевдоэлемента :placeholder с вендорными префиксами (в специальных правилах), например:

    input::-webkit-input-placeholder { color: #ccc; }
    input::-moz-placeholder { color: #ccc; }
    input:-ms-input-placeholder { color: #ccc; }
    input::placeholder { color: #ccc; }

Особенности применения CSS

Вышеуказанные селекторы имеют одинаковые особенности, поэтому нужно быть внимательным, если вы применяете два или более стиля к одному и тому же вводимому значению. Рассмотрим:

    input:invalid { color: red; }
    input:enabled { color: black; }

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

Лучше применять простые селекторы и минимальные коды. Например, поле :required с пустым значением будет :invalid (недействительным), поэтому практически никогда не приходится задавать стили для первого класса селекторов.

Всплывающее окно проверки правильности

При отправке запроса, первое недействительное значение будет выделено и всплывет сообщение об ошибке.

Дизайн всплывающего окна будет разным, это зависит как от устройства, так и от браузера. Браузеры Webkit/Blink – единственные, которые позволяют изменять стили не по стандартам CSS:

    ::-webkit-validation-bubble { ... }
    ::-webkit-validation-bubble-arrow { ... }
    ::-webkit-validation-bubble-message { ... }
    ::-webkit-validation-bubble-arrow-clipper { ... }

Я не советую вам даже пытаться. Если вы хотите персонализированное форматирование ошибок, вам практически наверняка придется использовать и собственные сообщения. Это можно сделать только с Java Script.

Поддержка браузерами

Обычно наиболее значимые стили и селекторы доступны во всех современных браузерах с IE10+. Некоторые из наименее полезных селекторов, такие как in-range, пока доступны только в Webkit/Blink. Более ранние браузеры будут поддерживать селектор :focus, но для более сложных задач вам снова придется использовать JavaScript.

Создание удобных форм

Рассмотренные выше применяются сразу же. Например:

    input:invalid {
        border-color: #900;
    }

применит красную границу к любому полю с недействительным значением. Но, при первой загрузке web-страницы все поля могут иметь недействительные значения, и взору юзера предстанет устрашающее количество красных прямоугольников.

Что касается меня, то я предпочитаю, чтобы ошибки появлялись после отправки запроса или после перехода с поля, которое имеет недействительное значение. Браузеры не позволяют этого сделать стандартными инструментами. Как вы уже скорее всего догадались – здесь снова понадобится JavaScript. К нашей радости, API проверка ограничений валидации в HTML5 предоставляет набор инструментов для:

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

Поля ввода input в стиле Google Material Design на CSS3

Создание полей input в стиле Google Material Design на чистом CSS3

1. HTML-разметка

HTML будет довольно простым. Нам потребуется стандартная форма с двумя input-полями. Вот она:

<form>
   <div>      
      <input type="text" required>
      <span></span>
      <label>Имя</label>
   </div>
   <div>      
      <input type="text" required>
      <span></span>
      <label>Email</label>
   </div>
</form>

Тут у нас три компонента, которые нам нужны.

• input Будет служить в качестве входных данных.
• bar Проведет два бара, которые составляют подчеркивание.
• label Будет выступать в качестве placeholder, пока мы не нажмете на input. После чего он сместится вверх.

С HTML разобрались, переходим к CSS.

2. Анимирование input’ов

Все CSS-стили разделим на три составные части, это: starting stylings(дефолтные стили нашей формы) label/placeholder и underline.
Начнем, конечно с дефолтных стилей:

/* form starting stylings ------------------------------- */
.group {
  position: relative;
  margin-bottom: 30px;
}

input {
  font-size: 16px;
  padding: 10px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #ccc;
}
input:focus {
  outline: none;
}

Здесь мы просто разместили наши поля ввода формы. Также устанавливаем group позиционирование position:relative; для того, чтобы в дальнейшем иметь возможность размещать прочие элементы относительно этого.

Теперь переходим к стилизации прочих элементов нашей формы:

/* LABEL ======================================= */
label {
  color: #999;
  font-size: 18px;
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 15px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top: -15px;
  font-size: 14px;
  color: #5264AE;
}


/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 320px;
}
.bar:before, .bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}

/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

На этом все. Работа завершена, и теперь у нас есть поле ввода, похожее на поля ввода Google Material Design.

3. Результат работы

See the Pen Google Material Design (input) by Migo Userlife (@migo_userlife) on CodePen.

Как создать форму оформления заказа

На сайте нет рекламы

Узнать, как создать отзывчивую форму оформления заказа с помощью CSS.

Форма оформления заказа

Редактор кода »

Создать форму оформления заказа

Шаг 1) Добавить HTML

Использовать элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP.

Пример

        <div>
          <div>
            <h4>Платежный адрес</h4>
            <label for=»fname»><i></i>Имя</label>
            <input type=»text» name=»firstname» placeholder=»Щипунов Андрей Леонидович»>
            <label for=»email»><i></i> Email</label>
            <input type=»text» name=»email» placeholder=»and-shhipunov@mail.ru»>
            <label for=»adr»><i></i>Адрес</label>
            <input type=»text» name=»address» placeholder=»Томская 44-39″>
            <label for=»city»><i></i>Город</label>
            <input type=»text» name=»city» placeholder=»Пермь»>

            <div>
              <div>
                <label for=»state»>Государство</label>
                <input type=»text» name=»state» placeholder=»Россия»>
              </div>
              <div>
                <label for=»zip»>Zip</label>
                <input type=»text» name=»zip» placeholder=»10001″>
              </div>
            </div>
          </div>

          <div>
            <h4>Платеж</h4>
            <label for=»fname»>Допустимые карты</label>
            <div>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
            </div>
            <label for=»cname»>Имя на карте</label>
            <input type=»text» name=»cardname» placeholder=»Щипунов Андрей Леонидович»>
            <label for=»ccnum»>Номер кредитной карты</label>
            <input type=»text» name=»cardnumber» placeholder=»1111-2222-3333-4444″>
            <label for=»expmonth»>Годен месяц</label>
            <input type=»text» name=»expmonth» placeholder=»Сентябрь»>

            <div>
              <div>
                <label for=»expyear»>Годен год</label>
                <input type=»text» name=»expyear» placeholder=»2021″>
              </div>
              <div>
                <label for=»cvv»>CVV</label>
                <input type=»text» name=»cvv» placeholder=»352″>
              </div>
            </div>
          </div>

        </div>
        <label>
          <input type=»checkbox» checked=»checked» name=»sameadr»> Адрес дставки совпадает с платежным адресом
        </label>
        <input type=»submit» value=»Продолжить оформление заказа»>
      </form>
    </div>
  </div>

  <div>
    <div>
      <h5>Корзина
        <span>
          <i></i>
          <b>4</b>
        </span>
      </h5>
      <p><a href=»#»>Элемент 1</a> <span>$15</span></p>
      <p><a href=»#»>Элемент 2</a> <span>$5</span></p>
      <p><a href=»#»>Элемент 3</a> <span>$8</span></p>
      <p><a href=»#»>Элемент 4</a> <span>$2</span></p>
      <hr>
      <p>Всего <span><b>$30</b></span></p>
    </div>
  </div>
</div>

Шаг 2) Добавить CSS:

Используйте CSS Флексбокс для создания адаптивного макета:

Пример

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

span.price {
  float: right;
  color: grey;
}

/* Адаптивный макет — когда экран меньше 800 пикселей в ширину, сделайте два столбца стеком друг на друга, а не рядом друг с другом (и измените направление-сделайте столбец «корзина» сверху) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}

Редактор кода »

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.

Совет: Зайдите на наш учебник CSS Флексбокс чтобы узнать больше о гибком модуле компоновки коробки.

Использование CSS стилей для формы оплаты — Возможности PayKeeper

PayKeeper позволяет использовать настраиваемую форму оплаты. Это может понадобиться, если

• Необходим собственный дизайн формы оплаты
• Необходимо передавать в PayKeeper дополнительную информацию о плательщике
• Необходима собственная сложная логика инициализации оплаты
• Стандартная форма PayKeeper не удовлетворяет вашим требованиям и вы хотите ее заменить

С помощью CSS стилей форме можно придать любое необходимое оформление.

Ниже, представлены несколько примеров форм.

.input_type {
padding:8px;
border:1px solid #ccc;
display:block;
border-bottom:1px solid #ccc;
width:25%
}
.sub_btn {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
}

Непосредственно сама форма:

<form method=’POST’ action=’https://demo.paykeeper.ru/create’ >
Фамилия Имя: <input type=’text’ name=’clientid’ value=»/> <br />
Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br />
Телефон: <input type=’text’ name=’client_phone’ value=»/> <br />
Электронный адрес: <input type=’text’ name=’client_email’ placeholder=’test@example.com’ value=»/> <br />
Введите сумму оплаты: <input type=’text’ name=’sum’ value=’1’/> <br />
<input type=’submit’ value=’Перейти к оплате’ />
</form>

Другой пример верстки выполненный с помощью фреймворка Bootstrap.

Подключаем фреймворк через CDN:

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css»
integrity=»sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO» crossorigin=»anonymous»>

<script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js»
integrity=»sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy» crossorigin=»anonymous»></script>

<form method=’POST’ action=’https://demo.paykeeper.ru/create’ >
<div>
Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br />
</div>
<div>
Укажите электронный адрес:
<input type=»email» name=’client_email’ placeholder=’test@example.com’ value=»/> <br />
</div>
<div>
Выберите сумму оплаты:
<select name=’sum’>
<option>100</option>
<option>200</option>
<option>300</option>
</select>
</div><br />
<input type=’submit’ value=’Перейти к оплате’ />

</form>

Примеры форм авторизации

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

Имея это в виду, я попытался создать несколько примеров различных форм авторизации. Цель состояла в том, чтобы сделать акцент на некоторые особенности каждой из них.

Необходимо отметить несколько вещей, прежде чем начать:

• В статье пропущены префиксы CSS-кода, но вы, конечно, можете найти их в исходных файлах.
• Целью урока является показать потенциал CSS, в частности, CSS3, поэтому внешний вид форм может быть отличаться в браузерах младше IE8-. Если вы планируете поддерживать эти браузеры, не забудьте сделать fallback.
• Я не использовал атрибуты для тега формы, такие как action, method, так как я сделал основной акцент на дизайне.
• Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Я активировал её следующим кодом:

*,
*:after,
*:before {
    box-sizing: border-box;
}

Теперь давайте перейдем непосредственно к созданию форм!

Пример 1

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

Разметка

<form>
    <p>
        <input type=»text» name=»login» placeholder=»Логин или емэйл»>
        <i></i>
    </p>
        <p>
        <input type=»password» name=»password» placeholder=»Пароль»>
        <i></i>
    </p>      
    <p>
        <button type=»submit» name=»submit»><i></i></button>
    </p>
</form>

Итак, наш первый пример довольно прост, мы не будем использовать какие-либо лэйблы. Но нам нужно указать нашему пользователю, что они должны написать в этих полях, поэтому мы используем … иконки. Для этого используем тег <i/>.

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

Теперь у нас есть два контейнера, которые содержат текстовое поле и иконку. Кнопка Submit имеет собственный контейнер, мы используем тег <button/> вместо <input/> с иконой внутри.

Мы также будем использовать placeholder, чтобы назначение полей стало еще более ясным для всех кто использует современные браузеры. Более подробную информацию о поддержке браузерами атрибута placeholder можно найти на CanIUse.com.

CSS

Мы начнем с определения некоторых стилей для элемента form. Форма является основной оболочкой для нашего примера, поэтому мы зададим ей ширину и расположим в центре при помощи свойства margin.

.form-1 {
    /* Размер и положение */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative; /* For the submit button positioning */
 
    /* Styles */
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.3),
        0 3px 7px rgba(0, 0, 0, 0.3),
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: linear-gradient(#eeefef, #ffffff 10%);
}
 
.form-1 .field {
    position: relative; /* For the icon positioning */
}

Важно: мы задали для формы position:relative, чтобы иметь возможность разместить кнопку Submit с абсолютным позиционированием. Мы делаем то же самое для контейнеров с классом .field, чтобы также поместить с абсолютным позиционированием иконки.
Теперь зададим стили для значков.

.form-1 .field i {
    /* Size and position */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;
 
    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
 
    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 42px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

Мы добавим тонкие линии по правой стороне иконки, установим правую границу и тень.

Теперь нам нужно задать некоторые стили для текстовых полей:

.form-1 input[type=text],
.form-1 input[type=password] {
    font-family: ‘Lato’, Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
 
    /* Size and position */
    width: 100%;
    padding: 10px 18px 10px 45px;
 
    /* Styles */
    border: none; /* Remove the default border */
    box-shadow:
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    transition: color 0.3s ease-out;
}
 
.form-1 input[type=text] {
    margin-bottom: 10px;
}

Прежде чем идти дальше, не забудем определить стили для состояний :hover и :focus.

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
    color: #52cfeb;
}
 
.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
    color: #42A2BC;
}
 
.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
    outline: none;
}

Обратим внимание на следующие вещи: мы используем родственный селектор (~), чтобы изменить цвет иконки при работе с полями: светло-синий при наведении мыши, темно-синий при активном поле. И мы также удаляем контур для Chrome.

Последнее, что мы должны сделать — это кнопку «Отправить».

.form-1 .submit {
    /* Size and position */
    width: 65px;
    height: 65px;
    position: absolute;
    top: 17px;
    right: -25px;
    padding: 10px;
    z-index: 2;
 
    /* Styles */
    background: #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 2px rgba(0,0,0,0.1),
        0 3px 2px rgba(0,0,0,0.1),
        inset 0 -3px 2px rgba(0,0,0,0.2);
}

Все довольно просто: мы создаем круглый элемент и помещаем его вверху нашей формы, слегка сдвинув его в правую сторону. Тени подчеркнут эффект перекрытия.

.form-1 .submit:after {
    /* Size and position */
    content: «»;
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    left: 30px;
 
    /* Styles */
    background: #ffffff;
     
    /* Other masks trick */
    box-shadow: 0 62px white, -32px 31px white;
}

Последнее, но не менее важное, наша фактическая кнопка отправки:

.form-1 button {
    /* Size and position */
    width: 100%;
    height: 100%;
    margin-top: -1px;
 
    /* Icon styles */
    font-size: 1.4em;
    line-height: 1.75;
    color: white;
 
    /* Styles */
    border: none; /* Remove the default border */
    border-radius: inherit;
    background: linear-gradient(#52cfeb, #42A2BC);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 1px 2px rgba(0,0,0,0.35),
        inset 0 3px 2px rgba(255,255,255,0.2),
        inset 0 -3px 2px rgba(0,0,0,0.1);
 
    cursor: pointer;
}

И, наконец, стили для наведения, фокуса (например, при переходе по клавиши табуляции) и активного (нажатого) состояния кнопки:

.form-1 button:hover,
.form-1 button[type=submit]:focus {
    background: #52cfeb;
    transition: all 0.3s ease-out;
}
 
.form-1 button:active {
    background: #42A2BC;
    box-shadow:
        inset 0 0 5px rgba(0,0,0,0.3),
        inset 0 3px 4px rgba(0,0,0,0.3);
}

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

Пример 2

Еще одна простая форма, но с некоторыми новые опциями, такими как: «Войти через Twitter» и «Показать пароль». Это потребует некоторого кода JavaScript.

Разметка

<form>
    <h2><span>Войти</span> или <span>зарегистрироваться</span></h2>
    <p>
        <label for=»login»><i></i>Логин</label>
        <input type=»text» name=»login» placeholder=»Логин или email»>
    </p>
    <p>
        <label for=»password»><i></i>Пароль</label>
        <input type=»password» name=»password» placeholder=»Пароль»>
    </p>
    <p>
        <a href=»#»>Войти через Twitter</a>  
        <input type=»submit» name=»submit» value=»Войти»>
    </p>      
</form>

Здесь мы будем использовать заголовок. Я выбрал h2, но вы можете использовать любой тег. Мы также используем теги label, связанные с текстовыми полями при помощи атрибута for.

CSS

Давайте начнем с некоторых общих стилей для формы:

.form-2 {
    /* Size and position */
    width: 340px;
    margin: 60px auto 30px;
    padding: 15px;
    position: relative;
 
    /* Styles */
    background: #fffaf6;
    border-radius: 4px;
    color: #7e7975;
    box-shadow:
        0 2px 2px rgba(0,0,0,0.2),      
        0 1px 5px rgba(0,0,0,0.2),      
        0 0 0 12px rgba(255,255,255,0.4);
}

Мы создадим полупрозрачные границы и применим тени.

Теперь, когда мы задали некоторые основные стили для нашей формы, разберемся с заголовком. Мы используем 3 различных стиля для заголовка:

.form-2 h2 {
    font-size: 15px;
    font-weight: bold;
    color: #bdb5aa;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBE6E2;
    text-shadow: 0 2px 0 rgba(255,255,255,0.8);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
 
.form-2 h2 .log-in,
.form-2 h2 .sign-up {
    display: inline-block;
    text-transform: uppercase;
}
 
.form-2 h2 .log-in {
    color: #6c6763;
    padding-right: 2px;
}
 
.form-2 h2 .sign-up {
    color: #ffb347;
    padding-left: 2px;
}

Далее, мы используем два параграфа, которые будут размещены рядом друг с другом. Каждый займет 50% от доступного пространства формы, а благодаря “border-box” box-sizing, отступы рассчитываются внутри этих 50%. Вот почему мы можем задать расстояние между ними.

.form-2 .float {
    width: 50%;
    float: left;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,1);
}
 
.form-2 .float:first-of-type {
    padding-right: 5px;
}
 
.form-2 .float:last-of-type {
    padding-left: 5px;
}

Теперь стили для внутренних элементов! Там у нас находятся лэйбл и текстовое поле. Иконка будет находится внутри лэйбла в этом примере:

.form-2 label {
    display: block;
    padding: 0 0 5px 2px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    font-size: 11px;
}
 
.form-2 label i {
    margin-right: 5px; /* Gap between icon and text */
    display: inline-block;
    width: 10px;
}

Примечание: использование cursor: pointer для лэйблов помогает пользователям понять, что они могут нажать на них. Это важная деталь. 

.form-2 input[type=text],
.form-2 input[type=password] {
    font-family: ‘Lato’, Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    display: block;
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 3px solid #ebe6e2;
    border-radius: 5px;
    transition: all 0.3s ease-out;
}

Не забывайте о состояниях hover и focus:

.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover {
    border-color: #CCC;
}
 
.form-2 label:hover ~ input {
    border-color: #CCC;
}
 
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
    border-color: #BBB;
    outline: none; /* Remove Chrome’s outline */
}

Проверьте, как мы используем родственный селектор (~), чтобы вызвать состояние hover на текстовом поле, когда мы наводим мышь на лэйбл. Разве это не круто?

Теперь кнопка submit.

.clearfix:after {
    content: «»;
    display: table;
    clear: both;
}
 
.form-2 input[type=submit],
.form-2 .log-twitter {
    /* Size and position */
    width: 49%;
    height: 38px;
    float: left;
    position: relative;
 
    /* Styles */
    box-shadow: inset 0 1px rgba(255,255,255,0.3);
    border-radius: 3px;
    cursor: pointer;
 
    /* Font styles */
    font-family: ‘Lato’, Calibri, Arial, sans-serif;
    font-size: 14px;
    line-height: 38px; /* Same as height */
    text-align: center;
    font-weight: bold;
}
 
.form-2 input[type=submit] {
    margin-left: 1%;
    background: linear-gradient(#fbd568, #ffb347);
    border: 1px solid #f4ab4c;
    color: #996319;
    text-shadow: 0 1px rgba(255,255,255,0.3);
}
 
.form-2 .log-twitter {
    margin-right: 1%;
    background: linear-gradient(#34a5cf, #2a8ac4);
    border: 1px solid #2b8bc7;
    color: #ffffff;
    text-shadow: 0 -1px rgba(0,0,0,0.3);
    text-decoration: none;
}

Обе кнопки имеют ширину 49%, и у них есть левый/правый отступ, чтобы сделать небольшой зазор между ними. Сейчас мы зададим стили для активного состояния и состояния при наведении курсора мыши.

.form-2 input[type=submit]:hover,
.form-2 .log-twitter:hover {
    box-shadow:
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 20px 40px rgba(255,255,255,0.15);
}
 
.form-2 input[type=submit]:active,
.form-2 .log-twitter:active{
    top: 1px;
}

Благодаря относительному позиционированию, мы можем применить top: 1px к кнопкам в активном состоянии, чтобы они выглядели так, как будто они вдавливаются при нажатии.

Важно: для браузеров, которые не поддерживают box-shadow (такие все еще существуют, правда?), мы используем вместо этого изменение background-color. Класс no-boxshadow применяется к тегу HTML при помощи Modernizr, в случае если браузер не поддерживает box-shadow. Это хороший пример того, как можно создать простой «fallback» для старых браузеров:

.no-boxshadow .form-2 input[type=submit]:hover {
    background: #ffb347;
}
 
.no-boxshadow .form-2 .log-twitter:hover {
    background: #2a8ac4;
}

JavaScript

Эй, вы не забыли про нашу маленькую фичу «показать пароль»? Сейчас мы сделаем это! Во-первых, вы знаете, что мы не можем изменить тип атрибута для поля?  Для того, чтобы показать пароль, мы должны удалить фактическое ввода для пароля и создать новое текстовое поле.

Я не очень хорошо знаю jQuery, так что я нашел маленький фрагмент кода от Aaron Saray:

$(function(){
    $(«.showpassword»).each(function(index,input) {
        var $input = $(input);
        $(«<p/>»).append(
            $(«<input type=’checkbox’ />»).click(function() {
                var change = $(this).is(«:checked») ? «text» : «password»;
                var rep = $(«<input placeholder=’Password’ type='» + change + «‘ />»)
                    .attr(«id», $input.attr(«id»))
                    .attr(«name», $input.attr(«name»))
                    .attr(‘class’, $input.attr(‘class’))
                    .val($input.val())
                    .insertBefore($input);
                $input.remove();
                $input = rep;
             })
        ).append($(«<label for=’showPassword’/>»).text(«Показать пароль»)).insertAfter($input.parent());
    });
});

Так что же это скрипт делает?

• Он находит поле с классом .showpassword.
• Создает новый контейнер (.opt).
• Внутри этого контейнера, он создает чекбокс с надписью.
• Вставляет этот контейнер после поля с классом .showpassword.
• Когда чекбокс отмечен, он удаляет поле .showpassword и создает еще одно, с соответствующим атрибутом type.

Не забудем задать некоторые стили для нашего чекбокса:

.form-2 p:last-of-type {
    clear: both;  
}
 
.form-2 .opt {
    text-align: right;
    margin-right: 3px;
}
 
.form-2 label[for=showPassword] {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 400;
    text-transform: capitalize;
}
 
.form-2 input[type=checkbox] {
    vertical-align: middle;
    margin: -1px 5px 0 1px;
}

Последнее, но не менее важное, мы добавим несколько строк jQuery, чтобы изменить значок, когда чекбокс отмечен! Довольно просто, но весьма эффективно!

$(‘#showPassword’).click(function(){
    if($(«#showPassword»).is(«:checked»)) {
        $(‘.icon-lock’).addClass(‘icon-unlock’);
        $(‘.icon-unlock’).removeClass(‘icon-lock’);  
    } else {
        $(‘.icon-unlock’).addClass(‘icon-lock’);
        $(‘.icon-lock’).removeClass(‘icon-unlock’);
    }
});

Пример 3

Этот пример вдохновлен старой работой от Virgil Pana с Dribbble. К сожалению, похоже, что он удалил её с Dribbble, так что я не могу показать вам оригинальную концепцию. В любом случае, вы, наверное, поняли смысл, и я покажу вам, как создать этот удивительный световой эффект при помощи чистого CSS!

Разметка

<form>
    <p>
        <label for=»login»>Логин</label>
        <input type=»text» name=»login» placeholder=»Логин»>
    </p>
    <p>
        <label for=»password»>Пароль</label>
        <input type=»password» name=»password» placeholder=»Пароль»>
    </p>
    <p>
        <input type=»checkbox» name=»remember»>
        <label for=»remember»>Запомнить меня</label>
    </p>
    <p>
        <input type=»submit» name=»submit» value=»Войти»>
    </p>      
</form>

Обратите внимание, что мы добавили новое поле: «Запомнить меня». Оно используется в формах авторизации, что позволяет приложению запоминать вас.

CSS

.form-3 {
    font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
    font-weight: 400;
    /* Size and position */
    width: 300px;
    position: relative;
    margin: 60px auto 30px;
    padding: 10px;
    overflow: hidden;
 
    /* Styles */
    background: #111;
    border-radius: 0.4em;
    border: 1px solid #191919;
    box-shadow:
        inset 0 0 2px 1px rgba(255,255,255,0.08),
        0 16px 10px -8px rgba(0, 0, 0, 0.6);
}

Тень под формой входа будет выглядеть особенно, поэтому зададим отрицательный радиус распространения. Мы можем как бы сжать тень.

Давайте добавим стили для лэйблов и текстовых полей:

.form-3 label {
    /* Size and position */
    width: 50%;
    float: left;
    padding-top: 9px;
 
    /* Styles */
    color: #ddd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #000;
    text-indent: 10px;
    font-weight: 700;
    cursor: pointer;
}
 
.form-3 input[type=text],
.form-3 input[type=password] {
    /* Size and position */
    width: 50%;
    float: left;
    padding: 8px 5px;
    margin-bottom: 10px;
    font-size: 12px;
 
    /* Styles */
    background: linear-gradient(#1f2124, #27292c);  
    border: 1px solid #000;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1);
    border-radius: 3px;
 
    /* Font styles */
    font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
    color: #fff;
 
}
 
.form-3 input[type=text]:hover,
.form-3 input[type=password]:hover,
.form-3 label:hover ~ input[type=text],
.form-3 label:hover ~ input[type=password] {
    background: #27292c;
}
 
.form-3 input[type=text]:focus,
.form-3 input[type=password]:focus {
    box-shadow: inset 0 0 2px #000;
    background: #494d54;
    border-color: #51cbee;
    outline: none; /* Remove Chrome outline */
}

Теперь у нас есть красивые поля и мы должны создать наш маленький флажок «Запомнить меня», и кнопку отправки. Эти две вещи размещенны рядом друг с другом:

.form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
    float: left;
    width: 50%;
}

Давайте начнем с чекбокса и его лэйбла:

.form-3 label[for=remember] {
    width: auto;
    float: none;
    display: inline-block;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0px;
    text-indent: 2px;
}
 
.form-3 input[type=checkbox] {
    margin-left: 10px;
    vertical-align: middle;
}

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

Последнее, наша кнопка отправки:

.form-3 input[type=submit] {
    /* Width and position */
    width: 100%;
    padding: 8px 5px;
   
    /* Styles */
    border: 1px solid #0273dd; /* Fallback */
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 10px 10px rgba(255,255,255,0.1);
    border-radius: 3px;
    background: #38a6f0;
    cursor:pointer;
   
    /* Font styles */
    font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
    color: white;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
 
.form-3 input[type=submit]:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
 
.form-3 input[type=submit]:active {
    background: #287db5;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
    border-color: #000; /* Fallback */
    border-color: rgba(0,0,0,0.9);
}
 
.no-boxshadow .form-3 input[type=submit]:hover {
    background: #2a92d8;
}

Но где, черт возьми, наш обещанный световой эффект? Ладно, ребята, давайте займемся им. Чтобы добиться этого, нам нужны три элемента:

• Один для линии градиента в верхней части формы
• Один для небольшую вспышки на предыдущей строке
• Один для большого отражения в правой части формы

Начнем с первых двух элементов, при помощи псевдо-элементов для тега form.

/* Gradient line */
.form-3:after {
    /* Size and position */
    content: «»;
    height: 1px;
    width: 33%;
    position: absolute;
    left: 20%;
    top: 0;
 
    /* Styles */
    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
 
/* Small flash */
.form-3:before {
    /* Size and position */
    content: «»;
    width: 8px;
    height: 5px;
    position: absolute;
    left: 34%;
    top: -7px;
     
    /* Styles */
    border-radius: 50%;
    box-shadow: 0 0 6px 4px #fff;
}

Наконец, наше отражение света. Но подождите, мы не имеем достаточно псевдо-элементов! Не волнуйтесь, мы будем использовать наш первый параграф для этого.

.form-3 p:nth-child(1):before{
    /* Size and position */
    content: «»;
    width: 250px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 45px;
 
    /* Styles */
    transform: rotate(75deg);
    background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    pointer-events: none;
}

Важно: вы должны отключить события click при помощи свойства pointer-events. Если вы этого не сделаете, вы не сможете нажать на input, так как там будет слой поверх них. Мы будем вынуждены удалить отражения для браузеров, которые не поддерживают pointer-events (мы добавили соответствующий класс при помощи Modernizr):

.no-pointerevents .form-3 p:nth-child(1):before {
    display: none;
}

Пример 4

Особенностью этой формы является отсутствие лэйблов или иконок. Да, я помню, что я говорил ранее, что нам необходимо иметь что-то, чтобы сообщить пользователям, что нужно вводить в то или иное поле. И у нас это есть! Мы будем использовать placeholders. А для браузеров, которые не поддерживают их, мы сделаем видимыми лэйблы!

Разметка

<form>
    <h2>Форма входа</h2>
    <p>
        <label for=»login»>Логин или email</label>
        <input type=»text» name=»login» placeholder=»Логин или email» required>
    </p>
    <p>
        <label for=»password»>Пароль</label>
        <input type=»password» name=’password’ placeholder=»Пароль» required>
    </p>
 
    <p>
        <input type=»submit» name=»submit» value=»Продолжить»>
    </p>      
</form>

Обратите внимание на атрибут required. Этот атрибут позволяет браузеру, если он его поддерживает, проверять пустое поле или нет, и сабмитить форму если поле заполнено.

Важно: вы всегда должны добавлять серверную проверку после отправки формы. При помощи веб-инспектора или firebug-a очень легко удалить этот атрибут и JavaScript также может быть отключен, так что не полагайтесь только на валидацию стороне клиента.

CSS

Как всегда, начнем с формы и названия, так как это довольно просто.

.form-4 {
    /* Size and position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative;
 
    /* Font styles */
    font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
    color: white;
    text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
 
.form-4 h2 {
    font-size: 22px;
    padding-bottom: 20px;
}

Давайте перейдем к полям:

.form-4 input[type=text],
.form-4 input[type=password] {
    /* Size and position */
    width: 100%;
    padding: 8px 4px 8px 10px;
    margin-bottom: 15px;
 
    /* Styles */
    border: 1px solid #4e3043; /* Fallback */
    border: 1px solid rgba(78,48,67, 0.8);
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2),
        inset 0 1px 1px rgba(0,0,0,0.1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
 
    /* Font styles */
    font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
    color: #fff;
    font-size: 13px;
}

Теперь изменим стили для placeholders (где это возможно):

.form-4 input::-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.form-4 input:-moz-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.form-4 input:-ms-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

Далее, давайте добавим стили для состояний hover и focus:

.form-4 input[type=text]:hover,
.form-4 input[type=password]:hover {
    border-color: #333;
}
 
.form-4 input[type=text]:focus,
.form-4 input[type=password]:focus,
.form-4 input[type=submit]:focus {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2),
        inset 0 1px 1px rgba(0,0,0,0.1),
        0 0 0 3px rgba(255,255,255,0.15);
    outline: none;
}
 
/* Fallback */
.no-boxshadow .form-4 input[type=text]:focus,
.no-boxshadow .form-4 input[type=password]:focus {
    outline: 1px solid white;
}

И кнопки отправки:

.form-4 input[type=submit] {
    /* Size and position */
    width: 100%;
    padding: 8px 5px;
     
    /* Styles */
    background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));  
    border-radius: 5px;
    border: 1px solid #4e3043;
    box-shadow:
        inset 0 1px rgba(255,255,255,0.4),
        0 2px 1px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease-out;
 
    /* Font styles */
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    font-size: 16px;
    font-weight: bold;
    font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
}
 
.form-4 input[type=submit]:hover {
    box-shadow:
        inset 0 1px rgba(255,255,255,0.2),
        inset 0 20px 30px rgba(99,64,86,0.5);
}
 
/* Fallback */
.no-boxshadow .form-4 input[type=submit]:hover {
    background: #594642;
}

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

.form-4 label {
    display: none;
    padding: 0 0 5px 2px;
    cursor: pointer;
}
 
.form-4 label:hover ~ input {
    border-color: #333;
}
 
.no-placeholder .form-4 label {
    display: block;
}

Это очень просто, если placeholders не поддерживается, то будут видны лэйблы.

Пример 5

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

Разметка

<form>
    <p>
        <input type=»text» name=»login» placeholder=»Логин»>
        <input type=»password» name=»password» placeholder=»Пароль»>
    </p>
    <button type=»submit» name=»submit»>
        <i></i>
        <span>Вход</span>
    </button>    
</form>

Минималистичная разметка для минималистичного вида. 😉

CSS

.form-5 {
    /* Size and position */
    width: 300px;
    margin: 60px auto 30px;
    position: relative;
 
    /* Styles */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}

Стили для параграфов и полей:

.form-5 p {
    width: 70%;
    float: left;
    border-radius: 5px 0 0 5px;
    border: 1px solid #fff;
    border-right: none;
}
 
.form-5 input[type=text],
.form-5 input[type=password] {
    /* Size and position */
    width: 100%;
    height: 50px;
    padding: 0 10px;
 
    /* Styles */
    border: none; /* Remove the default border */
    background: white; /* Fallback */
    background: rgba(255,255,255,0.2);
    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.5);
 
    /* Font styles */
    font-family: ‘Montserrat’, sans-serif;
    text-indent: 10px;
    color: #ee4c8d;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 20px;      
}
 
.form-5 input[type=text] {
    border-bottom: 1px solid #fff; /* Fallback */
    border-bottom: 1px solid rgba(255,255,255,0.7);
    border-radius: 5px 0 0 0;
}
 
.form-5 input[type=password] {
    border-top: 1px solid #CCC; /* Fallback */
    border-top: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 0 5px;
}

Давайте попробуем применить некоторые стили при наведении мыши и стили для placeholders:

.form-5 input[type=text]:hover,
.form-5 input[type=password]:hover,
.form-5 input[type=text]:focus,
.form-5 input[type=password]:focus {
    background: #f7def7; /* Fallback */
    background: rgba(255,255,255,0.4);
    outline: none;
}
 
.form-5 input::-webkit-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: ‘Handlee’, cursive;
}
 
.form-5 input:-moz-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: ‘Handlee’, cursive;
}
 
.form-5 input:-ms-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: ‘Handlee’, cursive;
}

А теперь для кнопки отправки. Тег i будет содержать значок стрелки, но мы будем делать его видимым только при наведении курсора мыши. Обратите внимание, что мы используем тег span внутри кнопки, чтобы включить текст без включения кнопки.

.form-5 button {
    /* Size and position */
    width: 30%;
    height: 102px;
    float: left;
    position: relative;
    overflow: hidden;
 
    /* Styles */
    background:
        url(../images/noise.png),
        radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
    border-radius: 0 5px 5px 0;
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.7),
        inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    border: none;
    border-left: 1px solid silver;
    cursor: pointer;
    line-height: 102px; /* Same as height */
}
 
.form-5 button i {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -20px;
    font-size: 64px;
    line-height: 109px;
    color: #8d1645;
    opacity: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    transition: all 0.2s ease-out;
}
 
.form-5 button span {
    display: block;
 
    /* Font styles */
    color: #8d1645;
    font-family: ‘Montserrat’, Arial, sans-serif;
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    transform: rotate(-90deg);
    transition: all 0.2s linear;
}

В случае, если браузер не поддерживает свойство transform, текст просто не поворачивается. Ничего страшного.
Мы добавили тонкую текстуру для кнопки, применяя два фона: текстуру и радиальный градиент.

Теперь, давайте добавим стили для состояний hover, focus и active:

.form-5 button:focus {
    outline: none;
}
 
.form-5 button:hover span,
.form-5 button:focus span {
    opacity: 0;
    transform: rotate(-90deg) translateY(-20px);
}
 
.form-5 button:hover i,
.form-5 button:focus i {
    opacity: 0.5;
    left: 0;
    transition-delay: 0.2s;
}
 
/* Click on button */
 
.form-5 button:active span,
.form-5 button:active i {
    transition: none;
}
 
.form-5 button:active span {
    opacity: 0;
}
 
.form-5 button:active i {
    opacity: 0.5;
    left: 0;
    color: #fff;
}  

JavaScript

Мы используем код JavaScript для добавления поведения HTML5 placeholder для браузеров, которые не поддерживают его. Мы собираемся использовать jQuery плагин от Mathias Bynens. Смотрите на GitHub.

После подключения jQuery и скрипта, мы просто вызовем следующий код:

$(function(){
    $(‘input, textarea’).placeholder();
});

И это будет добавить placeholder в старые браузеры.

И это все! Спасибо за чтение этого урока, надеюсь вам понравилось!

Скачать исходные файлы

Перевод статьи с http://tympanus.net/codrops/

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

40 форм HTML и CSS для регистрации аккаунта, оплаты и прочего

Если есть что-то, что обычно очень характерно для любого типа веб-сайта, это формы. Формы, которые мы используем для заполнения контактной информации, введите банковские реквизиты, войдите в социальную сеть или просто выполните поиск, аналогичный тому, который мы обычно делаем ежедневно в поисковой системе Google.

Итак, сегодня мы покажем вам 40 форм в CSS начиная от контактных форм, выписки по кредитной карте, логина, простого, подписки или даже проверки. Серия элегантных и стильных форм, которые придадут вашему сайту особый оттенок, независимо от его темы.

Минималистичная контактная форма

Простая контактная форма с большое разнообразие эффектов такие как плавающие метки или линейная анимация. Элегантный код CSS с небольшим количеством JavaScript. Если вы ищете минималистичная форма для связи это идеально подходит для вас.

Теме статьи:

23 высококачественных библиотеки CSS для веб-дизайна

Минималистичная форма

Другой минимальная форма, хотя только в CSS, чтобы быть простая и эффектная форма. У него нет минималистичной анимации предыдущего, но он очень хорошо выполняет свою задачу.

Форма обратной связи Vintage

Форма обратной связи Vintage, очень элегантный дизайн. Отзывчивый для этих веб-сайтов быть замеченным с мобильного, хотя он не включает проверку.

Контактная форма письма

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

Теме статьи:

27 бесплатных карточек HTML и CSS для блогов, электронной коммерции и многого другого

Расширенная контактная форма

это контактная форма развернута Это только интерфейс и проверка с помощью jQuery. Мы нажимаем на плавающую кнопку, и форма появится с яркой анимацией. Выдающийся.

Пользовательский интерфейс контактной формы

Пользовательский интерфейс контактной формы это форма, сделанная на HTML и CSS. Он выделяется тем, что простая карточка контакта который мы можем заполнить так, чтобы при щелчке по нему изменялось только текстовое поле.

Расчет платежной карты

Un выписка по платежной карте сделано в HTML, CSS и JavaScript, которые отличается вращающейся анимацией кредитную карту, когда мы нажимаем на поле CVC или контрольного номера.

Плоский дизайн кредитной карты

Чистый CSS для оформить заказ на кредитные карты в плоских цветах. Красочный и очень простой, способный обозначать качество и профессионализм.

Пользовательский интерфейс кредитной карты

Еще одна кредитная карта в HTML, CSS и JavaScript, которая выделяется тем, насколько она хороша. выбрали общий дизайн. Мы забыли об анимации в этом фрагменте кода для вашего сайта. Скачать по этой ссылке.

React Checkout

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

Платежная карта Checkout

Эта касса отличается возможностью нанесения изображения на карту. А простая и понятная форма, сделанная с помощью CSS3, HTML5 и немного jQuery. Высокое качество и отличается от остальных касс в этом списке. Вы можете скачать здесь кассу этой платежной карты.

это форма оплаты кредитной картой запрограммирован на практику с JavaScript для манипуляции с DOM. Вы можете вспомнить в дизайне элегантный код Stripe, цифрового банковского сервиса, который становится все ближе к PayPal.

Кредитная карта

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

Пошаговая форма

Un пошаговая форма для регистрации производится в HTML, CSS и JavaScript. Четыре шага для каждой точки расположен с левой стороны. Хорошо законченные анимации для очень законченной формы. Настоятельно рекомендуется.

Интерактивная форма

Un интерактивная форма многошаговый, сделанный с помощью HTML, CSS и JavaScript. Он выделяется анимацией перехода между каждым из шагов. У него элегантный штрих, который не останется незамеченным.

Пошаговая форма

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

Пошаговая форма готова в HTML, CSS и JavaScript. Для него характерна анимация перехода между каждым из шагов.

Многоступенчатая форма JQuery

Если у вас есть очень длинная форма, это идеально подходит для разных разделов с очень яркой полосой выполнения. Основанный на jQuery и CSS, он выделяется своим дизайном и большой элегантностью.

Форма анимации пользовательского интерфейса

Переходы этого Форма анимации пользовательского интерфейса Estan на основе Domink Marskusic. Обратите внимание на творческий эффект синего поля, когда мы нажимаем на одно из двух полей логина или логина.

Создание учетной записи / форма входа

Уловка логин и создание аккаунта который основан на анимации что происходит между этими двумя разделами. Очень актуальное и яркое присутствие должно быть сделано в HTML, JavaScript и CSS.

Подсветка змеи

Подсветка змеи — один из самых ярких логинов среди всех списков, выделяется элегантной анимацией который появляется быстро, когда мы нажимаем на одно из двух полей.

Экран входа в систему

Божественный этот дизайн экран входа в систему так их анимации и насколько это креативно. Если вы хотите быть в курсе последних новостей о веб-дизайне, эту форму нельзя пропустить. Незаменим.

Дизайн пользовательского интерфейса входа

Разработан с использованием HTML, Sass и jQuery. Дизайн пользовательского интерфейса входа es eзаконный и ясный на тему, в которой есть тонкая анимация, чтобы стать еще одним из фаворитов в списке.

Вход и создание учетной записи UI

Специальный дизайн входа в систему и пользовательский интерфейс для создания учетной записи  для цветов и для представления в одна большая карта два раздела. Еще один из самых красивых в исполнении, который нельзя пропустить. Сделано в HTML, CSS и JavaScript.

Вредные ошибки

Вредные ошибки Это отличный вход из-за анимации поля с obnoxious.css. Оригинальный, чтобы быть веселым, беззаботным и совершенно другим логином. Без сомнения, оригинал для нашего сайта.

Войти CSS HTML

Любопытный логин разными иконками которые показывают каждое из полей, чтобы направить посетителя туда, куда мы захотим. Выделяются также оттенки, выбранные в цветах. У него нет анимации. Он сделан на HTML и CSS, чтобы реализовать его на веб-сайте для клиента или для себя.

Модальная форма входа

это Модальная форма входа вдохновлен языком дизайн, известный благодаря Material Design. Мы видели это во многих приложениях на мобильных устройствах. В этом коде у нас есть панель входа и панель регистрации, которая по умолчанию скрыта. Панель регистрации можно активировать, нажав на синий столбец, расположенный справа. У него отличная анимация, которая делает вход в систему особенным и ярким.

Форма flexbox

Формы поиска начинаем с этого форма на основе flexbox. Он выделяется красным цветом «поиска» и немногим более элегантным полем поиска для вашего веб-сайта.

С этой анимированная коробка щелкните значок увеличительного стекла и появится ярко-синяя анимация так что нам нужно только ввести поиск, который мы собираемся выполнить на веб-сайте. Сделано с помощью HTML, CSS и JavaScript.

Поле поиска

Una большая линия проходит по экрану так что, когда мы ее нажимаем, мы начинаем вводить поиск. Кнопка подбора, чтобы определить это простая форма поиска.

Простое поле поиска нажмите на

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

Эффект ввода текста CSS

Эффект ввода текста CSS включает серию анимация в тексте и панели поиска быть внимательным искателем формы.

Полноэкранный поиск

Эта запись из полноэкранный поиск он работает с любым типом макета или положения. Требуются стили специфичный для контейнера и элемент наложения поиска находиться в корне. Он характеризуется подпрыгивающей анимацией в момент нажатия кнопки поиска.

Поиск

Un форма поиска просто это он любит играть разными позициями и анимации. Мы нажимаем кнопку поиска, и появляется полный ящик для ввода слов. Очень актуально и настоятельно рекомендуется из-за того, насколько это просто.

Нет вопросов

Нет вопросов es простая форма с текстовым полем и возможность выбрать некоторые ответы, чтобы пользователь мог их выбрать. Великолепно визуально быть одним из лучших.

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

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

Una коробка подписки с сигнальным звонком и немного больше, чем плоские цвета В дизайне.

Поле подписки CSS

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

Поле подписки

Una простая подписка но очень эффектный по замыслу.

Форма подтверждения EMOJI

В чистом виде CSS это форма проверки создать ключ или пароль. Пока мы пишем, смайлы будут измерять уровень безопасности формы. Без сомнения, забавно и любопытно.

Не пропустите это список из 23 анимированных стрелок в CSS.

CSS-счетчиков

Счетчики

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

Автоматическая нумерация со счетчиками

Счетчики

CSS похожи на «переменные». Значения переменных могут быть увеличены с помощью правил CSS.
(который будет
отслеживать, сколько раз они используются).

Для работы со счетчиками CSS воспользуемся следующими свойствами:

• counter-reset — Создает или сбрасывает счетчик
• counter-increment — увеличивает значение счетчика
• содержимое — Вставки созданы
  содержание
• counter () или counters () Функция — добавляет
  значение счетчика элемента

Чтобы использовать счетчик CSS, он должен быть сначала создан с помощью counter-reset .

В следующем примере создается счетчик для страницы (в селекторе основного текста),
затем увеличивает значение счетчика для каждого элемента

и добавляет «Секция

< значение счетчика >:»
до начала каждого элемента

:

Пример

корпус {
сброс счетчика: секция;
}

h3 :: before {
counter-increment: section;
содержание: «Раздел» счетчик (раздел) «:»;
}

Попробуй сам »

Счетчики вложенности

В следующем примере создается один счетчик для страницы (раздела) и один
счетчик для каждого элемента

(подраздел).Счетчик «раздела» будет
подсчитывается для каждого элемента

со значением «Section <»
счетчик разделов >. «, и счетчик» подразделов «будет засчитан
для каждого элемента

с «

< значение счетчика раздела >. < значение
подсекция счетчика > «:

Пример

корпус {
сброс счетчика: секция;
}

h2 {
сброс счетчика: подраздел;
}

h2 :: before {
счетчик инкремента:
раздел;
содержание: «Раздел« счетчик (раздел) ».»;
}

h3 :: до {
счетчик-инкремент: подраздел;
содержание:
счетчик (раздел) «.» счетчик (подраздел) «»;
}

Попробуй сам »

Счетчик также может быть полезен для составления обрисованных списков, потому что новый
экземпляр счетчика автоматически создается в дочерних элементах. Здесь мы используем
counters () функция для вставки строки между разными уровнями вложенности
счетчики:

Пример

ol {
сброс счетчика: секция;
тип-стиль-список: нет;
}

li :: before {
counter-increment: section;
содержание: счетчики (раздел, «.»)» «;
}

Попробуй сам »

Свойства счетчика CSS

Расширенный стиль форм — Изучите веб-разработку

В этой статье мы увидим, что можно сделать с помощью CSS, чтобы стилизовать те типы элементов управления формы, которые сложнее стилизовать — «плохие» и «уродливые» категории.Как мы видели в предыдущей статье, текстовые поля и кнопки очень легко стилизовать; Теперь мы перейдем к стилизации более проблемных частей.

Подводя итог сказанному в предыдущей статье, мы имеем:

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

Уродливое : Некоторые элементы нельзя полностью стилизовать с помощью CSS.К ним относятся:

Давайте сначала поговорим о свойстве Appearance , которое очень полезно для того, чтобы сделать все вышеперечисленное более стилизованным.

В предыдущей статье мы говорили, что исторически стили элементов управления веб-форм в значительной степени заимствовались из базовой операционной системы, что является частью проблемы с настройкой внешнего вида этих элементов управления.

Внешний вид Свойство было создано как способ контролировать, какой стиль на уровне ОС или системы применяется к элементам управления веб-формы.К сожалению, поведение исходных реализаций этого свойства сильно различается в разных браузерах, что делает его не очень удобным. Новые реализации более последовательны в поведении; Интересно, что оба браузера на основе Chromium (Chrome, Opera, Edge), Safari и Firefox поддерживают версию с префиксом -webkit- ( -webkit-appearance ). Firefox остановился на этом, потому что веб-разработчики в основном использовали версию с префиксом -webkit- , так что это было лучше для совместимости.

Если вы посмотрите справочную страницу, вы увидите множество различных возможных значений, перечисленных для -webkit-appearance , однако, безусловно, наиболее полезным значением и, вероятно, единственным, которое вы будете использовать, является none . Это предотвращает использование стилей системного уровня для любого элемента управления, к которому вы его применяете, и позволяет вам создавать стили самостоятельно, используя CSS.

Например, возьмем следующие элементы управления:

  <форма>
  

     поиск: 
    
  
  

     текст: 
    
  
  

     дата: 
    
  
  

     радио: 
    
  
  

     флажок: 
    
  
  
  
  
  
  

Применение к ним следующего CSS удаляет стили на системном уровне.

  вход {
  -webkit-appearance: нет;
  внешний вид: нет;
}  

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

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

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

Укрощение окон поиска

— это, по сути, просто ввод текста, так почему же вид : none; здесь пригодится? Ответ заключается в том, что в браузерах на основе Chromium в macOS окна поиска имеют некоторые ограничения стиля — например, вы не можете свободно регулировать их высоту или размер шрифта .Это связано с тем, что браузеры Chrome, отличные от macOS, больше не используют механизм рендеринга WebKit, который по умолчанию включал внешний вид Aqua для определенных элементов управления формы. При включенной Aqua некоторые элементы управления формы не масштабируются.

Это можно исправить с помощью нашего друга. Внешний вид: нет; , который отключает внешний вид Aqua по умолчанию:

  input [type = "search"] {
    -webkit-appearance: нет;
    внешний вид: нет;
}  

В приведенном ниже примере вы можете увидеть два окна поиска с одинаковым стилем.Правый имеет вид : нет; применяется, а левый — нет. Если вы посмотрите на него в macOS Chrome, вы увидите, что левый не имеет правильного размера.

Интересно, что установка границы / фона в поле поиска также решает эту проблему, поскольку также отключает или «нарушает» внешний вид Aqua. Следующий поисковый запрос со стилями не имеет вид : none; , но он не страдает той же проблемой в macOS Chrome, что и в предыдущем примере.

Примечание : Вы могли заметить, что в поле поиска значок удаления «x» исчезает, когда ввод теряет фокус в Edge и Chrome, но остается в Safari.Чтобы удалить через CSS, вы можете использовать input [type = "search"] :: - webkit-search-cancel-button {display: none; } . Однако это, похоже, избавляет от значка с фокусом , без видимого способа вернуть его.

Стилизация флажков и переключателей

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

Например, рассмотрим этот простой тестовый пример:

  пролет {
    дисплей: встроенный блок;
    фон: красный;
}

input [type = "checkbox"] {
    ширина: 100 пикселей;
    высота: 100 пикселей;
}  

Различные браузеры справляются с этим по-разному, часто некрасиво:

Использование внешнего вида: нет на радио / флажках

Как мы показали ранее, вы можете полностью удалить внешний вид флажка или переключателя по умолчанию с внешним видом : none; Давайте возьмем этот пример HTML:

  <форма>
  

    
 Фруктовые предпочтения 

    

      <метка>
        
        Я люблю вишню
      
    
    

      <метка>
        
        Я не люблю банан
      
    
    

      <метка>
        
        Я люблю клубнику
      
    
  
  

Теперь давайте стилизуем их с помощью пользовательского дизайна флажка.Начнем с отмены стиля оригинальных флажков:

  input [type = "checkbox"] {
  -webkit-appearance: нет;
  внешний вид: нет;
}
  

Мы можем использовать псевдоклассы : checked и : disabled , чтобы изменить внешний вид нашего настраиваемого флажка при изменении его состояния:

  input [type = "checkbox"] {
  положение: относительное;
  ширина: 1em;
  высота: 1em;
  граница: 1 пиксель сплошного серого цвета;
  
  вертикальное выравнивание: -2 пикселя;
  
  цвет: зеленый;
}

input [type = "checkbox"] :: before {
  содержание: «✔»;
  позиция: абсолютная;
  размер шрифта: 1.2em;
  вправо: -1px;
  верх: -0,3em;
  видимость: скрыта;
}

input [type = "checkbox"]: checked :: before {
  
  видимость: видимая;
}

input [type = "checkbox"]: disabled {
  цвет границы: черный;
  фон: #ddd;
  цвет: серый;
}  

Вы узнаете больше о таких псевдоклассах и многом другом в следующей статье; вышеперечисленные делают следующее:

• : отмечено — флажок (или переключатель) находится в отмеченном состоянии — пользователь щелкнул / активировал его.
• : отключено — флажок (или переключатель) находится в отключенном состоянии — с ним нельзя взаимодействовать.

Вы можете увидеть результат в реальном времени:

Мы также создали несколько других примеров, чтобы дать вам больше идей:

Если вы просматриваете эти флажки в браузере, который не поддерживает внешний вид , ваш индивидуальный дизайн будет утерян, но они все равно будут выглядеть как флажки и их можно будет использовать.

Примечание : Хотя Internet Explorer не поддерживает никакую версию внешнего вида , ввод [type = checkbox] :: - ms-check позволяет устанавливать флажки для флажков только в IE.Этот метод работает и для радиокнопок, несмотря на название -ms- check .

Теперь давайте обратим наше внимание на «уродливые» элементы управления — те, которые действительно сложно полностью стилизовать. Короче говоря, это раскрывающиеся списки, сложные типы элементов управления, такие как , цвет и , локально по дате и времени , и элементы управления, ориентированные на обратную связь, такие как и .

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

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

Возьмем следующий пример, который показывает в действии ряд «уродливых» функций формы:

В этом примере к нему применен следующий CSS:

  кузов {
  семейство шрифтов: Josefin Sans, без засечек;
  маржа: 20 пикселей автоматически;
  максимальная ширина: 400 пикселей;
}

form> div {
  нижнее поле: 20 пикселей;
}

Выбрать {
  -webkit-appearance: нет;
  внешний вид: нет;
}

.select-wrapper {
  положение: относительное;
}

.select-wrapper :: after {
  содержание: «▼»;
  размер шрифта: 1 бэр;
  верх: 6 пикселей;
  вправо: 10 пикселей;
  позиция: абсолютная;
}

button, label, input, select, progress, meter {
  дисплей: блок;
  семейство шрифтов: наследовать;
  размер шрифта: 100%;
  маржа: 0;
  размер коробки: рамка-рамка;
  ширина: 100%;
  отступ: 5 пикселей;
  высота: 30 пикселей;
}

input [type = "text"], input [type = "datetime-local"], input [type = "color"], выберите {
  box-shadow: вставка 1px 1px 3px #ccc;
  радиус границы: 5 пикселей;
}

метка {
  нижнее поле: 5 пикселей;
}

кнопка {
  ширина: 60%;
  маржа: 0 авто;
}  

Примечание : Если вы хотите протестировать эти примеры в нескольких браузерах одновременно, вы можете найти их в реальном времени здесь (также см. Здесь исходный код).

Также имейте в виду, что мы добавили некоторый JavaScript на страницу, которая перечисляет файлы, выбранные средством выбора файлов, под самим элементом управления. Это упрощенная версия примера, найденного на справочной странице .

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

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

  кнопка, метка, ввод, выбор, прогресс, счетчик {
  дисплей: блок;
  семейство шрифтов: наследовать;
  размер шрифта: 100%;
  отступ: 0;
  маржа: 0;
  размер коробки: рамка-рамка;
  ширина: 100%;
  отступ: 5 пикселей;
  высота: 30 пикселей;
}  

Мы также добавили однородные тени и закругленные углы к элементам управления, что имело смысл:

  input [type = "text"], input [type = "datetime-local"], input [type = "color"], выберите {
  box-shadow: вставка 1px 1px 3px #ccc;
  радиус границы: 5 пикселей;
}  

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

Давайте поговорим о некоторых особенностях каждого из этих типов контроля, выделив при этом трудности.

Выборки и списки данных

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

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

Две вещи немного более проблематичны. Прежде всего, значок «стрелка» при выборе, который указывает, что это раскрывающийся список, отличается в разных браузерах. Он также имеет тенденцию меняться, если вы увеличиваете размер поля выбора или изменяете его некрасивым образом. Чтобы исправить это в нашем примере, мы сначала использовали внешний вид нашего старого друга : none , чтобы полностью избавиться от значка:

  выбрать {
  -webkit-appearance: нет;
  внешний вид: нет;
}  

Затем мы создали наш собственный значок, используя сгенерированный контент.Мы помещаем дополнительную оболочку вокруг элемента управления, потому что :: before / :: after не работают с элементами (это потому, что сгенерированный контент размещается относительно поля форматирования элемента, но формирует входные данные работают больше как замененные элементы — их отображение создается браузером и вставляется на место — и поэтому их нет): Банан Вишня Лимон