Пятница, 07 Декабря 2012 16:34

Стилизация валидации HTML5 форм для WebKit

Written by 
Оцени эту запись
(2 Голоса)

HTML5 дает возможность проверить валидность введенных пользователем в форму данных на стороне клиента. Если вы, заполняя форму, не заполните обязательное поле или используете неправильный тип данных (например, в поле типа email), то браузер вам выдаст сообщение об этом. Сделает он это в так называемом validation bubble - всплывающем окошке с информацией. В данной статье мы рассмотрим как стилизировать это самое окошко.

 

В результате наша форма будет выглядеть в браузерах webKit так:

 

Стилизация валидации HTML5 форм для WebKit

Для этого делаем такую форму:

 

 

<form class="valid_bubble">
        <label>Your Name</label>
        <input type="text" required>
        <label>Phone</label>
        <input type="tel">
        <label>E-mail</label>
        <input type="email" required>
        <label>Your Question</label>
        <textarea></textarea>
        <input type="submit">
</form>
 
Задаем ей определенный стили - для полей и меток:
 
<style>
.valid_bubble {
            background: #fff;
            box-shadow: 0px 0px 2px 2px blueviolet;
            padding: 20px;
            width: 300px;
            color: #222;
            font-family: Arial;
            font-size: 14px;
 }
 .valid_bubble:after {
            content: '';
            clear: both;
            display: block;
 }
.valid_bubble input, .valid_bubble label, .valid_bubble textarea {
            display: block;
            height: 30px;
            line-height: 30px;
            clear: left;
            margin-bottom: 10px;
            line-height: 30px;
            padding: 2px;
 }
 .valid_bubble input, .valid_bubble textarea {
            float: right;
            clear: right;
            margin-left: 8px;
            border: 1px solid blueviolet;
            width: 140px;
            background: #eee;
 }
 .valid_bubble input:focus, .valid_bubble textarea:focus {
            outline-color: blue;
}
 .valid_bubble label {
            float: left;
            margin-right: 10px;
            width: 120px;
 }
.valid_bubble textarea {
            height: 90px;
            resize: vertical;
}
.valid_bubble input[type="submit"] {
            background-image: -webkit-linear-gradient(top, violet, blueviolet);
            box-shadow: 0px 0px 2px 2px blueviolet;
            color: white;
            font-size: 18px;
            text-align: center;
            font-weight: bold;
            text-shadow: 0px 0px 2px blueviolet;
            border-radius: 10px;
            float: none;
            margin: 0 auto;
            height: 40px;
            line-height: 38px;
}
 .valid_bubble input[type="submit"]:hover {
 background-image: -webkit-linear-gradient(top, blueviolet, violet);
 }
.valid_bubble input[type="submit"]:active {
            background: blueviolet;
}
.valid_bubble input:required ~ label:after {
            content: '*';
            color: red;
}
 .valid_bubble input:required + label:after {
            content: '';
            color: red;
}
</style>
 
 
Окошко валидации имеет четкую структуру, до основы которой докопаться сложно. Для того, чтобы можно было его стилизировать находим стандартные стили WebKit для данного элемента. Их мы и будем менять:
 
 
::-webkit-validation-bubble {
                display: inline-block;
                z-index: 2147483647;
                position: absolute;
                opacity: 0.95;
                line-height: 0;
                margin: 0;
                -webkit-text-security: none;
                -webkit-transition: opacity 05.5s ease;
                -webkit-user-modify: read-only !important;
 
}
::-webkit-validation-bubble-message {
                display: -webkit-box;
                position: relative;
                top: -4px;
                font: message-box;
                color: black;
                min-width: 50px;
                max-width: 200px;
                border: solid 2px #400;
                background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
                padding: 8px;
                border-radius: 8px;
                -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
                    inset -2px -2px 1px #d0c4c4,
                    inset 2px 2px 1px white;
                -webkit-user-modify: read-only !important;
                line-height: normal;
                white-space: normal;
                z-index: 2147483644;
}
 ::-webkit-validation-bubble-text-block {
                -webkit-box-flex: 1;
                -webkit-user-modify: read-only !important;
                border: 1px solid green;
 }
 ::-webkit-validation-bubble-heading {
                font-weight: bold;
                -webkit-user-modify: read-only !important;
                border: 1px solid red;
}
 ::-webkit-validation-bubble-arrow {
                display: inline-block;
                position: relative;
                left: 32px;
                width: 16px;
                height: 16px;
                background-color: #f8ecec;
                border-width: 2px 0 0 2px;
                border-style: solid;
                border-color: #400;
                box-shadow: inset 2px 2px 1px white;
                -webkit-transform-origin: 0 0;
                -webkit-transform: rotate(45deg);
                -webkit-user-modify: read-only !important;
                z-index: 2147483645;
}
 ::-webkit-validation-bubble-arrow-clipper {
                display: block;
                overflow: hidden;
                height: 16px;
                -webkit-user-modify: read-only !important;
}
 
 
 
Как видим, все элементы окошка валидности являются псевдоэлементами. Расскажу о них подробнее.
 
 
::-webkit-validation-bubble
 
 
Описывает общий блок окошка валидации. Именно ему задаются основные свойства по расположению блока и прозрачности.
 
 
::-webkit-validation-bubble-massage
 
 
Контейнер с информацией. Ему задается стилизация фона, тени, рамки и тд
 
 
::-webkit-validation-bubble-text-block
 
 
Текстовый элемент, его настройки менять не стоит
 
 
::-webkit-validation-bubble-arrow
 
 
Описывает стрелочку, она рисуется в виде квадратика и поворачивается на 45 градусов
 
 
::-webkit-validation-bubble-arrow-cliper
 
 
Обрезает лишний кусочек arrow, указывается высота и overflow:hidden.

 

Еще мы используем скрытие иконки окошка:

 

 

::-webkit-validation-bubble-icon {
                display: none;
}
 
Или можно просто заменить в этом элементе картинку:
 
 
::-webkit-validation-bubble-icon {
                background-image: url(icons/bubble_icon.png);
}
 
 
 
Получаем нашу готовую форму:
 
 
 
 
 
 
О стандартных стилях других элементов можно прочесть в статье Стандартные стили WebKit
 
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов