Exore LTD » CSS3 » Пользовательские стили для формы на чистом CSS без Javascript
Лого SiteHere.ru

Ноябрь 29, 2015 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Пользовательские стили для формы на чистом CSS без Javascript

Пользовательские стили для формы на чистом CSS без Javascript

Любой владелец сайта желает сделать сайт красивым и в это время легким, быстрым при загрузке. И в этой статье я расскажу как задать свои собственные стили для формы без использования js-скриптов.

Пример меню можно увидеть здесь:

Посмотреть примерСкачать



Стиль для элементов формы без Javascript

Как вы уже поняли из названия, мы без подлключения js-скриптов будем задавать свои стили для следующих элементов:

  • чекбоксы(поля с галочкой :))
  • радиокнопки
  • выпадающие списки
  • поле загрузки
  • текстовые поля
  • текстовые области
  • кнопки


Первым делом..

Тег <html> необходимо сделать следующим образом:

1
2
3
4
5
6

<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

Данный способ придумал Paul Irish для того, чтобы затем в CSS прописывать необходимые стили для любой версии IE не используя разные хаки. А также сбрасываем свойства, чтобы форма одинаково выглядела во всех браузерах:

1
2
3
4
5
6
7
8

input, select, textarea {
    margin:0;
    padding:0;
    font-size:0.85em;
    outline:none;
    font-family:inherit; 
    box-sizing:border-box;
}



HTML часть

Сначала в html пропишем данные элементы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <h2 id="first">Чекбоксы и радиокнопки (IE9+, FF, Opera, Webkit)</h2>
    <p>
        <input id="male" type="checkbox"><label for="male">Чекбокс</label><br>
        <input checked="checked" name="option" id="female" type="radio"><label for="female">Радиокнопка 1</label>
        <input name="option" id="female2" type="radio"><label for="female2">Радиокнопка 2</label>
    </p>
    <h2>Выпадающий список (IE8+, FF, Webkit)</h2>
    <div class="styled">
        <select>
            <option selected="selected">Элемент 1</option>
            <option>Элемент 2</option>
            <option>Элемент 3</option>
	</select>
    </div>
    <h2>Кнопка для загрузки файла (Webkit)</h2>
    <p><input type="file" value="Обзор"></p>
    <h2>Текстовое поле и текстовая область (IE9+, FF, Opera, Webkit)</h2>
    <p><input placeholder="Введите текст..." type="text"></p>
    <p><textarea placeholder="Введите текст..."></textarea></p>
    <p>
        <input value="« Назад" type="button">
        <input value="Вперед »" type="submit">
    </p>

Как видите все <label> имеют id как <input>. Это сделано для того, чтобы мы могли нажимая по тексту внутри <label> активировать данный элемент. Раньше мы заключали в <label> текст вместе с элементом, но html5 позволяет сделать это таким образом.




CSS часть

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

input[type="text"], textarea, select, div.styled, input[type="file"] {  
   width:12em; 
   border-radius:2px; 
   border: solid 1px #ccc; 
   padding:0.4em;
}
 
div.styled, select, input[type="submit"], input[type="button"], input[type="file"]:after {
   background: white url(formelements-select.png) no-repeat center right;
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}	
 
input[type="text"], textarea, input[type="file"] { 
   background-color: #f5f5f5;
   -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
   box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
}
 
.ie9 input[type="text"] {
   line-height:normal; 
} 
 
textarea {
   width:100%;
   height:10em; 
}
 
/* IE и Firefox */
 
div.styled {
   overflow:hidden;
   padding:0;
   margin:0; 
}
 
.ie7 div.styled {
   border:none;
}
 
div.styled select {	
   width:115%; background-color:transparent; 
   background-image:none;
   -webkit-appearance: none; 
   border:none; 
   box-shadow:none;
}
 
.ie7 div.styled select {
   width:100%; background-color:#fff; 
   border: solid 1px #ccc; 
   padding:0.3em 0.5em;
}	
 
/* Webkit(Chrome например)*/
 
input[type="file"] { 
   position: relative; 
   -webkit-appearance: none;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;	
   width: 40%;	
   padding:0;
}
 
input[type=file]::-webkit-file-upload-button {
   width: 0; 
   padding: 0; 
   margin: 0;
   -webkit-appearance: none;
   border: none;
}	
 
input[type="file"]:after {
   content: 'Загрузить';
   margin:0 0 0 0.5em;
   display: inline-block; left: 100%;
   position: relative;
   background:white url(../images/formelements-select.png) no-repeat center left;
   padding:0.3em 0.5em; 
   border: solid 1px #ccc !important;
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
   border-radius:4px;
}	
 
input[type="file"]:active:after {
   box-shadow:none;
}
 
input[type="radio"], input[type="checkbox"] { 
   position:absolute; 
   left:-999em;
}
 
label:before { 
   display:inline-block;
   position:relative;
   top:0.25em;
   left:-2px; 
   content:'';
   width:25px;
   height:25px;
   background-image:url(../images/formelements.png);
}
 
input[type="checkbox"] + label:before {
   background-position: 0 -25px;
}
 
input[type="checkbox"]:checked + label:before {
   background-position: 0 0;
}
 
input[type="radio"] + label:before {
   background-position: -25px -25px;
}
 
input[type="radio"]:checked + label:before {
   background-position: -25px 0;
}
 
/* Сброс стилей IE 7-8 */
 
.ie8 label:before {
   display:none; content:none; 
}
 
.ie8 input[type="checkbox"],.ie8 input[type="radio"],
.ie7 input[type="checkbox"],.ie7 input[type="radio"] { 
   position: static; left:0;
}
 
.ie8 input[type="checkbox"], .ie8 input[type="radio"] { 
   position:relative; top:5px;
   margin-right:0.5em;
}	
 
input[type="text"]:focus, textarea:focus {
   border-color:#000;
}
 
input[type="submit"], input[type="button"] { 
   padding:0.5em 1em; 
   line-height:1em; 
   cursor:pointer;
   border-radius:4px; 
   color:#000; 
   font-weight:bold; 
   font-size:inherit;
   border:solid 1px #ccc;
   box-shadow:0 1px 5px rgba(0,0,0,0.2);
   background-position: center bottom;
}
 
input[type="submit"]:active, input[type="button"]:active {
   -webkit-box-shadow: none;
   box-shadow:none;
}


И это без js-скриптов. А значит и загрузка будет проходить быстро. Рекомендую взять на заметку данную статью. Свои вопросы можете задавать в комментариях ниже.

Успехов!

Источник: onextrapixel.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *