- Стили HTML форм
- Почему так сложно стилизовать виджеты форм с помощью CSS?
- Не все виджеты созданы равными, когда задействован CSS
- Хорошая
- Плохая
- The ugly
- Basic styling
- Search fields
- Example
- Fonts and text
- Box model
- Positioning
- 36 CSS Login Forms
- Related Articles
- Author
- Links
- Made with
- About a code
- Hacker Login Form
- Author
- Links
- Made with
- About a code
- Finance Mobile Application-UX/UI Design Screen One
- Author
- Links
- Made with
- About a code
- Login Form
- Author
- Links
- Made with
- About a code
- Glassmorphism Login Form
- Author
- Links
- Made with
- About a code
- Sign Up / Login Form
- Author
- Links
- Made with
- About a code
- Creative and Customizable Registration Form
- Author
- Links
- Made with
- About a code
- eCommerce Registraion Form
- Author
- Links
- Made with
- About a code
- Registration Form #18
- Author
- Links
- Made with
- About a code
- Sign Up Form #26
- Author
- Links
- Made with
- About a code
- Sign Up Form #7
- Author
- Links
- Made with
- About a code
- Glassmorphism Login Form
- Author
- Links
- Made with
- About the code
- Sign Up Modal
- Author
- Links
- Made with
- About the code
- Double Slider Sign In/Up Form
- Author
- Links
- Made with
- About the code
- Login Form
- Author
- Links
- Made with
- About the code
- Simple Registration Form
- Author
- Links
- Made with
- About the code
- Login Modal Form
- Author
- Links
- Made with
- About the code
- Cube Login Form
- Author
- Links
- Made with
- About the code
- Login Form with Floating Labels
- Author
- Links
- Made with
- About the code
- Prismatic Forms
- Author
- Links
- Made with
- About the code
- Login Form Animation
- Author
- Links
- Made with
- About the code
- Login/Sign Up Form Animation
- Author
- Links
- Made with
- About the code
- Form UI Animation
- Author
Стили 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:
36 CSS Login Forms
Discover a collection of stylish and functional CSS login forms for your website from CodePen, GitHub, and other resources. Our update includes eight new items that will enhance your website’s user experience and improve the login process.
In today’s world, where most interactions take place online, creating a user-friendly and functional login form is crucial for any website or application. In this collection, we will explore some of the best pure CSS login forms available for free on the web, along with their features and benefits. Whether you’re a web developer or designer, these login forms are sure to inspire and help you create a seamless login experience for your users.
Related Articles
- Bootstrap Login Forms
Author
Links
Made with
About a code
Hacker Login Form
The Hacker Login Form is a unique and creative login form designed to resemble a hacker’s terminal. Overall, the Hacker Login Form is a fun and engaging login form that can add a unique touch to any website or application.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Finance Mobile Application-UX/UI Design Screen One
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Login Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Glassmorphism Login Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Sign Up / Login Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Creative and Customizable Registration Form
The form is fully customizable, allowing you to add or remove fields as per your requirements. You can also change the color scheme and fonts to match your brand’s identity. The form is easy to use and navigate, making it a great choice for users.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
eCommerce Registraion Form
The form’s modern design and responsive layout make it a great addition to any website looking to improve its user experience.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Registration Form #18
A modern and stylish registration form template that can be easily customized to fit any website. With its clean design and user-friendly interface, this form is perfect for collecting user information and creating a seamless registration process. It includes fields for name, email, password, and more.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Sign Up Form #26
A modern and stylish registration form template that can be used for various purposes. It features a clean and minimal design with a beautiful color scheme that can be customized to match your brand. The form includes fields for name, email, password, and confirmation, as well as a submit button. The template is fully responsive and can be easily integrated into your website or application.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Sign Up Form #7
Instead of getting one free creative signup form template, this bundle offers you two lovely alternatives to play with.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Glassmorphism Login Form
The form has a transparent glass-like effect with a blurred background, giving it a sleek and elegant look. The form has a username and password input field with attractive focus effect, making it easy for users to interact with.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Sign Up Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css, jquery.js, bootstrap.js, popper.js
Author
Links
Made with
About the code
Double Slider Sign In/Up Form
Double slider login form in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Login Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Simple Registration Form
Simple HTML and CSS registration form with validation.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Login Modal Form
HTML and CSS modal login form with little JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Cube Login Form
Pure CSS cube buttons and inputs for login form with gradien styles.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Login Form with Floating Labels
Pure CSS login form with floating labels.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Prismatic Forms
Prismatic login, sign up and other forms.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Login Form Animation
Login page animation template created with CSS3 and vanilla JavaScript DOM elements. Will surely try to upgrade it with more better animation effects.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Login/Sign Up Form Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Form UI Animation
Form transitions UI based on Dominik Markušić dribble.