Красивый css для формы

Стили HTML форм

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

Почему так сложно стилизовать виджеты форм с помощью CSS?

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

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

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

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

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

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

Хорошая

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

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

Плохая

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

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

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

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 , , and elements. The file picker widget is also known not to be stylable at all. The new and 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 (en-US) .

Basic styling

To style elements that are easy to style (en-US) 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 (en-US) .

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; /* For legacy WebKit based browsers */ -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */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:

Источник

85 Stylish CSS forms

Here is a collection of some of the most stylish CSS forms made with just HTML and CSS.

You may also like

• CSS Contact Forms
• 75 CSS Text Animations You Can Use
• 15 Amazing CSS Animated Background for you to try
• 57 Beautiful CSS Cards examples to improve your UI
• 19 Cool CSS Loading Animation to inspire you
• 17 Fancy CSS Search Boxes
• 21 Modern CSS menu examples
• 23 Fantastic CSS Hover Effects
• 19 CSS Border Animations you can implement
• 15 Stylised CSS Tables
• 13 Pure CSS Dropdown Menus
• 15 Creative CSS Filter Examples
• 35 Unique CSS Text Effects
• 15 CSS Sliders you can use
• 21 New Bootstrap Login Forms for you
• 19 Bootstrap Profiles you can use for yourself
• 13 Material Design Login Forms
• 35 Cool CSS Select Boxes
• 15 CSS Range Sliders you can use today
• 35 Creative use of CSS clip-path examples
• 29 Unique CSS Toggle Switches
• 41 Beautiful CSS Animation Examples

Animated Login Form

Dev: Alvaro Montoro

Animated Login Form

Dev: Alex Cornejo

Simple Login Form Animated

Dev: Himanshu C

Animated-Login-Form

See the Pen Animated-Login-Form by Swarup Kumar Kuila (@uiswarup) on CodePen.

Dev: Swarup Kumar Kuila

Animated Login Form

Dev: Stack Findover

Animated Login Form

Dev: Torben Colding

Neumorphic form

Dev: Pratham

Neumorphic form

Dev: Philip Lahner

Simple Sign In Form

Dev: John Bowie

Minimal Sign-In Form With Bulma.io

Dev: Paul Barker

Login Screen Animation

Dev: Johan Fagerbeg

Placeholders

Dev: Mikael Ainalem

See the Pen Subscribe by Omar Dsooky (@linux) on CodePen.

Dev: Omar Dsooky

Day 001 Login Form

Dev: Mohan Khadka

See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.

Dev: Tyler Fry

Card component with floating labels

Dev: Håvard Brynjulfsen

Login form. Svg animation

Dev: @BrawadaCom

Abstract Sign Up Form – Day 2 – 100 DAYS – 2020

Dev: Ricky Eckhardt

Login Form with floating placeholder and light button

Dev: Soufiane Khalfaoui HaSsani

Log In / Sign Up – Pure CSS

Dev: Ivan Grozdic

See the Pen Login by Marco Biedermann (@marcobiedermann) on CodePen.

Dev: Marco Biedermann

Animated Login Form

Dev: Munsif Mujtaba

Placeholders

See the Pen Placeholders by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Neumorphism Login Form

Dev: Ricardo Oliva Alonso

Dev: Mike Young

Login form using HTML5 and CSS3

Dev: Brad Bodine

Sleek Login Form

Dev: Tony Banik

CSS Newsletter with Animated Floating Input Labels

Dev: Bilal.Rizwaan

Newsletter Form Dribble to HTML

Red Newsletter Form

Dev: Sazzad

See the Pen form by Arefeh hatami (@arefeh_htmi) on CodePen.

Dev: Arefeh hatami

Pupassure Sign Up Form

Dev: Ricky Eckhardt

Less annoying form

See the Pen Less annoying form by Andy Fitzsimon (@andyfitz) on CodePen.

Dev: Andy Fitzsimon

Transparent Material Login Form

Dev: alphardex

POP ART Button

Dev: Ahmad Nasr

Login form UI Design

Dev: Chouaib Belagoun

Sign-Up/Login Form

Multi Step Form with Progress Bar using jQuery and CSS3

Dev: Atakan Goktepe

Credit Card Form

Dev: Muhammed Erdem

Snake highlight

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Material Login Form

Dev: Andy Tran

Login Form – Modal

Dev: Andy Tran

Google Material Design Input Boxes

Dev: Chris Sev

Log in/Sign up screen animation

Dev: Josh Sorosky

Interactive Sign Up Form

See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.

Dev: Riccardo Pasianotto

Double slider Sign in/up Form

Dev: Florin Pop

Credit Card Payment Form

Dev: Adam Quinlan

Slide Sign In/Sign Up form

Dev: Danielkvist

Flat Login Form

Dev: Andy Tran

Material Design Login Form

Dev: Josh Adamous

Form fields with material design and video background, in pure CSS

Dev: Jon Uhlmann

RESPONSIVE MATERIAL DESIGN CONTACT FORM

Dev: Nikhil Krishnan

Material VCard

See the Pen Material VCard by Rian Ariona (@ariona) on CodePen.

Dev: Rian Ariona

Registration Form

Dev: afirulaf

Login/Registration Form Transition

Dev: Nikolay Talanov

Expanding Contact Form

Dev: Joe Harry

Responsive Signup/Login form

Dev: Mohamed Hasan

Interactive Form

See the Pen Interactive Form by Emmanuel Pilande (@epilande) on CodePen.

Dev: Emmanuel Pilande

Log in / Sign up

Dev: @BrawadaCom

Login/signup form animation

Dev: Shayan

Step by step register form

Dev: Jerome Renders

Elegant Login Form

See the Pen Elegant Login Form by Victor Hugo Matias (@reidark) on CodePen.

Dev: Victor Hugo Matias

MINIMALISTIC FORM

Dev: Matheus Marsiglio

Credit Card Checkout

Dev: Fabio Ottaviani

Form Design

See the Pen Form Design by Timurtek Bizel (@Timurtek) on CodePen.

Dev: Timurtek Bizel

One line Signup

Dev: Vineeth.TR

Animated Login Form

Spectre sign up form

Dev: Alex Devero

No Questions Asked Form & Magic Focus

Dev: Michal Niewitala

Obnoxious errors

Dev: Maria cheline

Flexbox Form

See the Pen Flexbox Form by Katherine Kato (@kathykato) on CodePen.

Dev: Katherine Kato

Invision login – dribbble remake

Dev: Mikael Ainalem

Emoji Form Validation

Dev: Marco Biedermann

Sign Up Form

Dev: Johnny Bui

CSS Snackables

Credit Card Payment Form

Dev: Jade Preis

Signup form UI

Dev: Tyler Johnson

Step by Step Form Interaction

Dev: balapa

Step By Step Form

Dev: DevTips

Step By Step Form

See the Pen Step by step form by Jonathan H (@Dunner) on CodePen.

Dev: Jonathan H

Single input 3D form

See the Pen Single input 3D form by Son Tran-Nguyen (@sntran) on CodePen.

Dev: Son Tran-Nguyen

Step by step form [KO]

See the Pen Step by step form [KO] by Thays Dos Santos Neves (@thayssn) on CodePen.

Dev: Thays Dos Santos Neves

Step by step form

See the Pen step by step form by Senhor Sulaiman (@zenu) on CodePen.

Dev: Senhor Sulaiman

Contact Form

See the Pen Contact Form by Aina Requena (she/her) (@ainarela) on CodePen.

Dev: Aina Requena

Latest Post

55 Cool CSS Calendars

19 Barcodes in CSS

25 CSS Masonry Layout Examples

23 CSS Card Layouts

27 CSS Subscribe Forms

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok

Источник